Best IT Recipes

Problem using CSS icons

I am new to web design and development and play with various modeling techniques. In the course of my research, I came across font icons . Although I studied a number of tutorials and videos, I was not able to successfully use the icons, despite many hours of effort.

To get started, I went to a site that offers a large number of icon fonts, selected the ones I liked, generated them, and finally uploaded them to a folder. But now that these icons are in the folder, what should I do?

+8
html css icon-fonts
Oct 29 '12 at 21:33
source share
1 answer

The following is a step-by-step guide:

Go to Font Squirrel and download the @font-face kit. Unzip it, rename it to "fonts" and put it in the same directory as your html file.

Use this as your html file:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> @font-face { font-family: 'ModernPictogramsNormal'; src: url('fonts/modernpics-webfont.eot'); src: url('fonts/modernpics-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/modernpics-webfont.woff') format('woff'), url('fonts/modernpics-webfont.ttf') format('truetype'), url('fonts/modernpics-webfont.svg#ModernPictogramsNormal') format('svg'); font-weight: normal; font-style: normal; } li { list-style-type: none; } [data-icon]:before { font-family: 'ModernPictogramsNormal'; content: attr(data-icon); speak: none; padding:0 5px; } </style> </head> <body> <ul> <li data-icon="^">RSS</li> <li data-icon="*">Star</li> <li data-icon=".">Shopping Cart</li> </ul> </body> </html>

You should see this:

Icon Font Example

You ride!

Also, to find out which symbol to use, check the symbol map on the Font Squirrel website.

+12
Oct 29
source share


More articles:


All Articles