This page will provide instructions for using the webfont icons

Question: What are webfonts?
Answer: Webfonts are svg images (Scalable vector graphics) that have been formatted for and packaged into a font. Just like the other fonts that you are used to except instead of letters and numbers there are images.

Question: What is the purpose of webfont icons and why not just use graphics?
Answer: The biggest reason why webfonts are preferred over graphics is because they can scale bigger or smaller without loosing any clarity whereas scaling images too big or too smal can be quite ugly.

Question: How can I use these icons in my website?
Answer: You would have to install a webfont onto your server and then implement it into your html or css files accordingly. Since you are using the Pinnacle theme you do not need to worry about installing anything … all you need to do is use them.


Step 1: Find the icon that you want to use

Be sure to visit this page http://demo.kulersolutions.com/Pinnacle/details/buttons/index.php to find the exact icon that you want to use.

Once you have found the icon that you want to use then you can proceed to step 2



Step 2: Creating the Icon

Now that you have chosen the icon that you want to use you can create an html element (either a span, div, or anchor) and add the class name of the icon you have chosen.

Example: Suppose that you want to use the "Home" icon (The first icon in the leftmost column on this page http://demo.kulersolutions.com/Pinnacle/details/buttons/index.php).

You would create your html element like this:
Span:         <span class="icon-home"></span>
Div:             <div class="icon-home"></div>
Anchor:     <a href="#" class="icon-home"></a>



Step 3: Adding Size And Color

Using the code from Step 2 would produce this:

But let's suppose that you wanted the icon to be bigger and a different color … Well, because the icons are so versatile all you need to do is add some css to the html element from step 2. Example: Let's say that we want to use a pretty red color and make the icon 50px big then I could do this:     <span class="icon-home" style="font-size: 50px; color:#EA242D;";></span>

Which would produce this:


You can increase the font size to nearly any size you want and you can set the color using nearly any color you want.