Add !important to font-family declaration in style.css output

462 views
Skip to first unread message

s13si...@gmail.com

unread,
Sep 19, 2013, 12:38:16 AM9/19/13
to ico...@googlegroups.com
Just spent an hour trying to figure out why some icons were disappearing and some not.

These were placed into a header where there was an additional font-family style applied, and so when I added the icons in, my icon font-family was being overridden.

It occurred just after I had updated (added a new icon) the icon font, and had forgotten that I had modified the icon font styles to include !important on the font-family declaration:

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'MyIcons' !important;
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-dollarsign {
font-family: 'MyIcons' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

Would be great if this can be added by default to make sure that when an icon font is rendered, it always uses the correct font-family.

Cheers
Brendan

Reply all
Reply to author
Forward
0 new messages