Bits and pieces of my life
How to use IcoMoon app
 Note: This Tutorial is a guide to using the previous version of Icomoon App. The newer version is much simpler.  The step 'implementing the icons' is the same ol' thing. So you're pretty much not gonna regret reading this tutorial anyway :p

 Well I finally figured out how to use the IcoMoon app (with so much of determination of course!). I was crazy about glyph icons, thus, I browsed the net for websites offering free glyph icons. I concluded that IcoMoon App is da best! If you did read this previous post of mine, you would note I stated this;
"Font Awesome *best icon site everr!" and "IcoMoon is also great for icons as it offers a wide variety of delectable icons. However, I don't quite understand how to put it to use." Well, I was stupid back then. Alright, now that I understand the whole shit, lemme write a tutorial for ya (only if you're determined to learn this thing).

Firstly, understanding what glyph icons are. Here's an example, a screenshot from my blog;

notice those cute icons? yep, those are glyph icons.

going straight to the point;
  • select your icons (here).

mines from ' 50 mini icons (by Victor Erixon)

  • Generate Font.
once you've selected you fonts, click the "Font" button to generate you font.

  • Download Font.

  • Extract Files.
right-click on your downloaded font pack and extract it to access its contents.

  • Upload static file
when done with the above step, upload your font "style" in tumblr's "Upload a Static File"

*copy the link
  • Implementing the icons.
1)insert the copied link into this tag and paste it all in your website(very important step);
<link rel="stylesheet" type="text/css" href="..." />
 <link rel="stylesheet" type="text/css" href="" />

2) Open the index file in your extracted font pack.

3)  Insert the class names of the font and the code thingy of the font into this tag;
With link:
<a class="class name of font" data-icon="code thingy of font" href="/"></a>
without link:
*just replace the <a> tag with <p>
<p lass="class name of font" data-icon="code thingy of font"></p>

<a class="icon-home" data-icon="&#xe003;" href="/"></a>

yellow= class name of font
green= code thingy of font

  • Voila! You're done

Newer Posts Older Posts