The font is created, on the server, and CSS additions have been made to (hopefully) install it in the Salient theme. Ideally, I would like to be able to chose from this custom icon font as I can the three icon fonts available within Salient be default.
Here is a copy of the CSS that I've added (CSS is not my strong suit, so this is a copy-paste of other modified code):
The fonts are not getting referenced from the correct folder.
You\'re going to have to use css font-face to load the font in and assign it - you can actually see an example of this near the top of the style.css stylesheet in the theme (where open sans is loaded). Here\'s an in depth tutorial to explain it as well :)
Per my designer's request, I am looking to add a custom icon font to this site.
(Demo) Page in Question:
http://bluecollarendeavors.com/inklings/home/
The font is created, on the server, and CSS additions have been made to (hopefully) install it in the Salient theme. Ideally, I would like to be able to chose from this custom icon font as I can the three icon fonts available within Salient be default.
Here is a copy of the CSS that I've added (CSS is not my strong suit, so this is a copy-paste of other modified code):
@font-face {
font-family: 'inklingsicons';
src: url('css/fonts/inklings.eot');
src: url('css/fonts/inklings.eot?#iefix') format('embedded-opentype'),
url('css/fonts/inklings.woff') format('woff'),
url('css/fonts/inklings.ttf') format('truetype'),
url('css/fonts/inklings.svg#inklingsicons') format('svg');
font-weight: normal;
font-style: normal;
}
.icon-Affordable, .icon-Fun, .icon-Letter, .icon-Heart {
font-family: 'inklingsicon'!important;
content: attr(data-icon);
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-Affordable:before {
content: "\e600";
}
.icon-Fun:before {
content: "\e601";
}
.icon-Letter:before {
content: "\e602";
}
.icon-Heart:before {
content: "\e603";
}
Currently, nothing appears. What am I missing (in my CSS or otherwise) to make this happen?
Hey,
The fonts are not getting referenced from the correct folder.
You\'re going to have to use css font-face to load the font in and assign it - you can actually see an example of this near the top of the style.css stylesheet in the theme (where open sans is loaded). Here\'s an in depth tutorial to explain it as well :)
http://zoerooney.com/blog/tutorials/installing-web-fonts-start-to-finish/
Cheers
ThemeNectar Support Team