图标字体Font Awesome的引入与使用

下载地址

http://fontawesome.io/

引入的方式

主要引入font文件夹与font-awasome.min.css文件

假设index.html文件的css都放在同一个目录下的css文件夹中。这时讲fonts文件夹拷入，fonts文件夹需要与css文件夹在同一个目录下，并且是同等级别。

在css中，需要拷入 font-awesome.min.css 文件。

使用

在index.html中引入。

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">

在font-awesome.min.css 中修改目录，保证其正确性。

@font-face {
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');

在html中使用示例：

<i class="fa fa-home fa-fw">