http://fortawesome.github.io/Font-Awesome/whats-new/use Font Awesome to replace your website icon
Font Awesome, originally designed only for Bootstrap, but now you can use it alone to work on your website. Drop the picture icon and come with me with the font Awesome.
Font Awesome Features:
1, a font file, 249 icons.
2. Use CSS to control the style.
3, Unlimited zoom.
4, personal, business are free to use.
5, Support ie7+.
6, on the retina screen can also be perfectly presented.
7, the designer's assistant.
8, compatible screen reader.
Use of Font awesome:
1, first download font awesome fonts style files and fonts. CSS style file Download inventory here, please click here for font download
2. Copy the downloaded fonts and CSS style files to your project directory.
3, arbitrarily choose a CSS style file, you can choose Font-awesome.less or font-awesome.min.css as your icon style file.
4. Open the style file you selected, edit the font path in the style file, of course, this path is for your CSS style file location to determine.
5. You can refer to the style file in your project.
For example:
1 |
<link rel="stylesheet" href=". /css/font-awesome.min.css "> |
Or
1 |
<link rel="stylesheet" href=". /css/font-awesome.css "> |
If you need to be compatible with IE, please download font-awesome-ie7.css or FONT-AWESOME-IE7.MIN.CSS. The style file is then introduced into the project.
123 |
<! --[if IE 7]> < Link rel= "stylesheet" href= assets/css/ Font-awesome-ie7.min.css "> <! [endif]--> |
- 6. Add an HTML tag where you need to use these icons, give the label a class attribute, and see the Font awesome picture collection
For example:
Of course, these styles you can define yourself, but for compatibility, it is best to use the original!