Adding Custom Font Icons to RocketTheme Template

Rate this item
(1 Vote)

Using icons and images as text is fun, professional, and looks great. But how do you add a custom font icon pack to a RocketTheme template in addition to FontAwesome?

Inside the custom css file you created (templates/rt_template/custom/scss/), add this line to add your custom font easily while maintaining a clean custom CSS file:

@import "/templates/rt_template/custom/scss/fontcssfile.css";

Add your custom font files to the /templates/rt_template/fonts/ folder. We added ours in its own folder to keep everything organized.

Inside the CSS file that your font application created (we use Fontastic.me), target your font files like this:

@font-face {
font-family: "customfont";
src:url("../../fonts/customfont/customfont.eot");
src:url("../../fonts/customfont/customfont.eot?#iefix") format("embedded-opentype"),
url("../../fonts/customfont/customfont.woff") format("woff"),
url("../../fonts/customfont/customfont.ttf") format("truetype"),
url("../../fonts/customfont/customfont.svg#customfont") format("svg");
font-weight: normal;
font-style: normal;
}

There you go!

Read 507 times Last modified on Sunday, 23 September 2018 18:37