- Works pretty well in Chrome, IE9+, Firefox, Safari, iOS, Android 2.3+
- Extra span classes in "cta" links are not ideal
- first span allows aria-hidden to be specified so that icon is not spoken to as many screen readers
- second span allows styling flexibility including multiline support against an indented left gutter
- some jaggy-edges on font in IE8
- TODO: add fallback of bitmap or nothing for unsupported browsers
- TODO: works in IE8 but only renders icon after element hover; could be fixed with JS but would prefer a better way
Last active
December 26, 2015 04:19
-
-
Save bbrewer97202/7092356 to your computer and use it in GitHub Desktop.
Icon font implementation with MSHPIconsRegular web font
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>MSHPIconsRegular</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="//i.s-microsoft.com/fonts/segoe-ui/west-european/normal/latest.css" /> | |
| </head> | |
| <body> | |
| <style type="text/css"> | |
| @font-face { | |
| src:url('http://i.s-microsoft.com/fonts/Icons/Homepage/Normal/2.eot'); | |
| src:url('http://i.s-microsoft.com/fonts/Icons/Homepage/Normal/2.eot?#iefix') format('embedded-opentype'), | |
| url('http://i.s-microsoft.com/fonts/Icons/Homepage/Normal/2.woff') format('woff'), | |
| url('http://i.s-microsoft.com/fonts/Icons/Homepage/Normal/2.ttf') format('truetype'), | |
| url('http://i.s-microsoft.com/fonts/Icons/Homepage/Normal/2.svg#web') format('svg'); | |
| font-weight:normal; | |
| font-style:normal; | |
| font-family:'MSHPIconsRegular'; | |
| } | |
| body { | |
| margin: 0; | |
| } | |
| .cta { | |
| position: relative; | |
| text-decoration: none; | |
| color: #000; | |
| display: block; | |
| margin: 0 0 0.8em 0; | |
| font-family: wf_segoe-ui_normal, 'Segoe UI', 'Segoe WP', Tahoma, Arial, sans-serif; | |
| } | |
| .cta .icon { | |
| text-decoration: none; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| } | |
| .cta .icon:before { | |
| font-size: 1.8em; | |
| } | |
| .icon { speak: none; } | |
| .icon-left:before{ font-family:"MSHPIconsRegular"; content:'\2190'; } | |
| .icon-right:before{ font-family:"MSHPIconsRegular"; content:'\2192'; } | |
| .icon-menu:before{ font-family:"MSHPIconsRegular"; content:'\2261'; } | |
| .icon-search:before{ font-family:"MSHPIconsRegular"; content:'\2315'; } | |
| .icon-plus:before{ font-family:"MSHPIconsRegular"; content:'\002B'; } | |
| .icon-minus:before{ font-family:"MSHPIconsRegular"; content:'\002D'; } | |
| .icon-circledown:before{ font-family:"MSHPIconsRegular"; content:'\2228'; } | |
| .icon-globe:before{ font-family:"MSHPIconsRegular"; content:'\25CF'; } | |
| .icon-close:before{ font-family:"MSHPIconsRegular"; content:'\00D7'; } | |
| .icon-up:before{ font-family:"MSHPIconsRegular"; content:'\2191'; } | |
| .ctaCopy { | |
| display: block; | |
| margin: 0 0 0 2.3em; | |
| padding: 0.165em 0 0 0; | |
| } | |
| .content { | |
| margin: 1em auto; | |
| width: 86%; | |
| padding: 1em; | |
| background-color: #eee; | |
| } | |
| </style> | |
| <div class="content" role="main"> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-left" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-left</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-right" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-right</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-menu" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-menu</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-search" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-search</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-plus" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-plus</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-minus" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-minus</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-circledown" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-circledown</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-globe" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-globe</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-close" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-close</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-up" aria-hidden="true"></span> | |
| <span class="ctaCopy">icon-up</span> | |
| </a> | |
| <a class="cta" href="#"> | |
| <span class="icon icon-right" aria-hidden="true"></span> | |
| <span class="ctaCopy">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> | |
| </a> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment