Community Forums › Forums › Archived Forums › Design Tips and Tricks › Fontastic font icons in Genesis
Tagged: Font icons in Genesis, Fontastic
- This topic has 7 replies, 2 voices, and was last updated 9 years, 3 months ago by Tim Squires.
-
AuthorPosts
-
January 3, 2015 at 6:34 pm #135950Tim SquiresMember
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 🙂
http://fontastic.me/January 3, 2015 at 10:04 pm #135967ChristophMemberDownload 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.
January 5, 2015 at 8:18 pm #136150Tim SquiresMemberThanks, but still no luck.
I'll back up and start over, I must be doing something wrong.
Thanks again 🙂
January 6, 2015 at 7:24 am #136174Tim SquiresMemberWhew, 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 🙁
January 6, 2015 at 1:08 pm #136200ChristophMemberHi 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.
January 6, 2015 at 8:33 pm #136240Tim SquiresMemberHi 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 🙂
January 6, 2015 at 9:51 pm #136249ChristophMemberHi 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.
January 7, 2015 at 7:17 am #136276Tim SquiresMemberHi Christoph,
Your welcome, and thanks again. I hope the Elegant themes icons help you out sometime.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.