Beruflich Dokumente
Kultur Dokumente
com/)
Menu
The alternative would be to use standard characters (a to z, numbers, etc.). This can
cause screen readers to say things like, z Twitter, which isnt good for accessibility.
Once youve reset the encoding, click Download.
le.
Open up your favorite FTP client, and copy the fonts folder into the same directory
as your CSS le. If you need to put it somewhere else, thats ok. Youll just have to
change a few lines of code in your CSS le.
Now, open up your stylesheet and add a new section for icons.
@fontface{
fontfamily:'icomoon'
src:url('fonts/icomoon.eot')
src:url('fonts/icomoon.eot?#iefix')format('embeddedopentyp
e'),
url('fonts/icomoon.svg#icomoon')format('svg'),
url('fonts/icomoon.woff')format('woff'),
url('fonts/icomoon.ttf')format('truetype')
fontweight:normal
fontstyle:normal
}
This tells browsers where to nd the les for the font-family IcoMoon, and what the
default style and weight are.
Youll notice there are four different le types listed. Unfortunately (but not
surprisingly), not all browsers support the same le type, so its necessary to include
a few. Youll also notice that eot is listed twice. This is to x an issue with older
versions of IE (again, big surprise).
I prefer to see SVG listed last, as its typically a bit bigger than the other letypes and
often not as well hinted. Its used for iOS, which cannot load any of the other types.
After moving SVG to the end, your code should like this:
@fontface{
fontfamily:'icomoon'
src:url('fonts/icomoon.eot')
src:url('fonts/icomoon.eot?#iefix')format('embeddedopentyp
e'),
url('fonts/icomoon.woff')format('woff'),
url('fonts/icomoon.ttf')format('truetype'),
url('fonts/icomoon.svg#icomoon')format('svg')
fontweight:normal
fontstyle:normal
}
Update on 5/31/2013: In the comments, Nigel Anderson asked how many of these les
are downloaded by the browser (and how that could impact performance). The answer:
Browsers only download the rst supported le in the list, even if they support more than
one le type.
Creating a class #
There are two ways to include an icon font in your HTML. One involves adding data
icon= and then the character for your icon to an HTML object.
The second method, which I prefer, is to assign a class to the icon font. Rather than
remembering character values, you can add a Twitter icon, for example, by adding
class="icontwitter" to an HTML object.
IcoMoon gives you the option to use either method, but since the second is easier,
lets use that.
Youll see the following code in the style.css le:
/*UsethefollowingCSScodeifyouwanttohaveaclassperico
n*/
[class^="icon"]:before,
[class*="icon"]:before{
fontfamily:'icomoon'
fontstyle:normal
speak:none
fontweight:normal
webkitfontsmoothing:antialiased
}
This says that any class that begins with icon should use the IcoMoon font family,
has a style and weight of normal, and should not be read aloud by screen readers.
Youll notice that it also includes the webkit pre xed fontsmoothing property.
This improves the clarity of the font. For good measure, I also include a non-pre xed
version and textrendering:optimizeLegibility , which improves kerning on
Firefox and newer version of Internet Explorer.
The nal version of your code should look something like this:
/*UsethefollowingCSScodeifyouwanttohaveaclassperico
n*/
[class^="icon"]:before,
[class*="icon"]:before{
fontfamily:'icomoon'
fontstyle:normal
speak:none
fontweight:normal
webkitfontsmoothing:antialiased
fontsmoothing:antialiased
textrendering:optimizeLegibility
}
.icontwitter:before{
content:"\e000"
}
.iconfacebook:before{
content:"\e001"
}
.icondribbble:before{
content:"\e002"
}
Youll notice that were using the CSS3 :before selector. This inserts the speci ed
content before whatever HTML object the class is applied to. The content property
is used to de ne the unicode character.
You can copy this code directly from style.css (without any modi cations) into your
CSS le.
Update on 5/24/2013: In the comments, Michael Barrish correctly points out that <i> is
still a perfectly valid HTML element. What I meant to say was that the newer <em>
element is the preferred way to italicize, because it carries not just stylistic but semantic
meaning. Accordingly, I use <i> for my icons.
Dont forget to leave a space between the tag and the supporting text. For example,
use:
<iclass="icontwitter"></i>Twitter
Not:
<iclass="icontwitter"></i>Twitter
Styling icons #
Because the icons are a font, they will inherit the styling of their parent container by
default. However, you can apply additional styling using CSS.
For example, if you wanted all icons to have a shadow, you could add the text
shadow property to [class^="icon"]:before,[class*="icon"]:before .
You can also add gradients, hover effects, CSS3 transitions and more. One limitation:
the icons can only be a single color.
I like my social media icons to have branded colors, but still display the default hover
behaviors. Heres the code I would use to achieve that with the Twitter icon:
a.icontwitter{
color:#41b7d8
}
This code says that when a Twitter icon is used in a link, its color should be
#41b7d8 , which is Twitter blue.
In my base CSS, links on hover turn black darken and are underlined. With the code
above, the icon would still be underlined, but would be Twitter blue. We can x this
by adding a hover color:
a.icontwitter{
color:#41b7d8
}
a:hover.icontwitter{
color:#005580
}
Branded colors #
While by no means comprehensive, heres a list of popular social site colors to get
you started.
Twitter: #41b7d8
Facebook: #3b5997
Google: #d64937
LinkedIn: #0073b2
Vimeo: #388fc5
Flickr: #ff0084
Pinterest: #cb2027
Skype: #00aff0
RSS: #e0812a
Accessibility considerations #
Icon fonts are typically not read by screen readers. For accessibility reasons, you
should not rely on the icon alone to convey meaning.
Theres a simple CSS class you can use to include supporting text in your HTML but
position it off screen. If you wanted to display a Twitter icon, for example, you would
use this code:
HTML
<iclass="icontwitter"></i><spanclass="screenreader">Twitter
</span>
CSS
.screenreader{
position:absolute
top:9999px
left:9999px
}
Because the text wrapped in the .screenreader class is still displayed, screen
readers will detect it in the HTML and read it out loud. But because its positioned off
screen, sighted users will not see it.
Browser support #
Icon fonts work in Firefox, Chrome, Opera, Safari and the latest versions of Internet
Explorer back. They work in iOS and Android, but not Opera Mini. Strangely, they
dont work in IE9 on Windows Phone 7. This has been xed in Windows Phone 8.
While @fontface embedding has been supported since IE 5, the approach detailed
in this article uses pseudo selectors to include icons in the HTML, and thats only
supported back to IE 8. IcoMoon includes a JavaScript le named lteie7.js thats
supposed to provide support for older browsers, but Ive never gotten it to work, and
several others have mentioned running into issues with it in the comments section.
I treat icons as a progressive enhancement, and use a simple feature test to check for
support.
Feature test #
Browsers that dont support @fontface will sometimes display empty boxes where
the icons should go. This looks ugly and can sometimes overlap with text, making it
dif cult to read. I use a simple JavaScript feature test to check for @fontface and
pseudo selector support.
Download the script from GitHub (https://gist.github.com/cferdinandi/6269067) and
include it in your <head> element:
<scriptsrc="fontfacefeaturetest.js"></script>
This adds a .fontface class to the <html> element when both @fontface and
the :before pseudo selector are supported. In my CSS le, I pre x the icon names
with that class, so that theyre only activated when a browser has the proper support:
.fontface.icontwitter:before{
content:"\e000"
}
.fontface.iconfacebook:before{
content:"\e001"
}
.fontface.icondribbble:before{
content:"\e002"
}
You can also use this class to change what content is displayed based on whether or
not the browser supports icon fonts. For example, you might show an icon for
supporting browsers, and plain text for older browsers. Heres an example:
HTML:
<spanclass="iffontface"><iclass="icontwitter"></i><spancla
ss="screenreader">TweetThis</span></span>
<spanclass="nofontface">TweetThis</span>
CSS:
.iffontface,
.fontfacenofontface{
display:none
visiblity:hidden
}
.fontface.iffontface{
display:inline
visibility:visible
}
Despite these considerations, icon fonts are very well supported, highly- exible, and
ready to be used on web projects today. Their small size and crisp resolution make
them a versatile addition to responsive web development.
Sign Up
About (https://gomakethings.com/about/)
Consulting (https://gomakethings.com/consulting/)
Workshops (https://gomakethings.com/training/)
Books (https://gomakethings.com/books/)
Talks (https://gomakethings.com/talks/)
Articles (https://gomakethings.com/blog/)
Code (https://gomakethings.com/open-source/)
Podcast (https://gomakethings.com/podcast/)
Newsletter (https://gomakethings.com/newsletter/)
Made with <3 in Massachusetts. Copyright 2016 Go Make Things, LLC. Unless otherwise noted, all code is free to use under the
MIT License (https://gomakethings.com/mit).