Fontastic font icons in Genesis

[Tim Squires]

Hi, I'm having a lot of trouble figuring out how to use Fontastic font icons.

Does anyone know how to embed them into a Genesis website?

I have followed the instructions on the site as best I can, with no luck.

Thanks 🙂

---

timsquires.com.au

http://fontastic.me/

[Christoph]

Download and unzip your selection.
Open the unzipped style.css and copy the content.
Paste it into the style.css of your genesis child theme.
Copy the fonts folder with the font files into your child theme directory.

Insert the icon class name into any HTML tag to add the icon.
<div class="icon-***"></div>

Use the icon-reference.html as reference for the icon-**** names.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tim Squires]

Thanks, but still no luck.

I'll back up and start over, I must be doing something wrong.

Thanks again 🙂

---

timsquires.com.au

[Tim Squires]

Whew, I don't know why it won't work, but I'm exhausted after spending hours trying to figure it out. The resources and instructions on the website are very minimal, and Google doesn't seem to offer much.

As far as I can tell, I've followed the procedure to the letter - checked and rechecked everything. I might have to resort to making my own icons as images 🙁

---

timsquires.com.au

[Christoph]

Hi Tim,
.
sorry it is not working for you.

I just tried it again with the genesis sample theme and realized that I had to add the <div class> in the text/html tab. It wouldn´t work in the visual tab.

I copied the whole style.css that I got from fontastic into the style.css of the genesis (child) theme.
Then I created a fonts folder in the (child) theme folder and copied the .eot, .svg, .ttf and .woff files into it.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tim Squires]

Hi Christoph,

Thanks again for your help and suggestions - much appreciated!
I'm having better results with this:
http://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website#comment-155555
It works on the same principle, and I can actually get the icons to display, which is great.
I had some issues with the CSS - I managed to change the size and color, but for some reason couldn't change the alignment to center. I managed to overcome that problem by wrapping a paragraph tag around the span class and apply the text align value with some inline CSS. Not ideal, but will do for now.
Still not sure why the Fontastic system, which appears to be basically the same, won't work for me, but it's nice to have something workable for now.

Many thanks again 🙂

---

timsquires.com.au

[Christoph]

Hi Tom,

I´m glad you found a solution.
Sorry that I wasn´t able to help you solve the original problem.

Thanks for the link to the elegantthemes icons. I´ll have to try them sometime soon.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Tim Squires]

Hi Christoph,
Your welcome, and thanks again. I hope the Elegant themes icons help you out sometime.

---

timsquires.com.au

[Author]

Posts