Print this page

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 5169 times Last modified on Sunday, 23 September 2018 18:37