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