font awesome？如何应用Font Awesome矢量字体图标

一、如何使用Font Awesome字体图标

Font Awesome是一套专门为 Twitter Boostrap设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap的默认图标外，还有社交收集图标、Web应用法度图标和编辑器图标等等，可以免费用于贸易项目。

下面仅记录应用步调：

1.到官网高低载最新版本的Font Awesome.

2.解压文件，将此中的css和fonts文件夹拷贝到项目中，此中css文件夹中有两个css文件（font-awesome.css和font-awesome.min.css），fonts下有有5个，如下：

3.在须要应用的html或者其它类型的页面中引入样式文件，如下：

4.查看font-awesome.css文件，若是引用的是紧缩版的，就要查看那个文件了，打开文件看到第一个样式定义如下：

＠font-face{

font-family:""FontAwesome"";

src: url（""../fonts/fontawesome-webfont.eot？v=4.1.0""）;

src: url（""../fonts/fontawesome-webfont.eot？＃iefix&v=4.1.0""） format（""embedded-opentype""）， url（""../fonts/fontawesome-webfont.woff？v=4.1.0""） format（""woff""）， url（""../fonts/fontawesome-webfont.ttf？v=4.1.0""） format（""truetype""）， url（""../fonts/fontawesome-webfont.svg？v=4.1.0＃fontawesomeregular""） format（""svg""）;

font-weight: normal;

font-style: normal;

}

必然重视此中的src:url（）中的路径是不是当前与当前项目标实际路径向匹配。

4.最后在页面中参加响应的html元素，并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。：

<a class="list-group-item" href="＃"> Library</a>

<a class="list-group-item" href="＃"> Applications</a>

<a class="list-group-item" href="＃"> Settings</a>

</div>

别的，font awesome和BootStrap连络可以达到更好的结果。

二、如何应用Font Awesome矢量字体图标

/*Font-face首先第一步设置调用fontawesome的路径

=============================================================================*/

@font-face{

font-family:'FontAwesome';

src:url('../fonts/fontawesome-webfont.eot?v=4.3.0');

src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0')format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.3.0')format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.3.0')format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.3.0')format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular')format('svg');

font-weight:normal;

font-style:normal;

}

/*Component设置调用的默认大小

=============================================================================*/

[class*="am-icon-"]{

display:inline-block;

}

[class*="am-icon-"]:before{

display:inline-block;

font:normalnormalnormal1.6rem/1"FontAwesome",sans-serif;

/*font-weight:normal;//2

font-style:normal;//2

vertical-align:baseline;//3

line-height:1;//4*/

font-size:inherit;

text-rendering:auto;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

-webkit-transform:translate(0,0);

-ms-transform:translate(0,0);

transform:translate(0,0);

}

/*Iconmapping第三部配置content，content里面的代码就是具体的fontawesome图标了

=============================================================================*/

.am-icon-glass:before{

content:"\f000";

}

.am-icon-music:before{

content:"\f001";

}

.am-icon-search:before{

content:"\f002";

}

.am-icon-envelope-o:before{

content:"\f003";

}

.am-icon-heart:before{

content:"\f004";

}

.am-icon-star:before{

content:"\f005";

}

.am-icon-star-o:before{

content:"\f006";

}

.am-icon-user:before{

content:"\f007";

}

.am-icon-film:before{

content:"\f008";

}

.am-icon-th-large:before{

content:"\f009";

}

.am-icon-th:before{

content:"\f00a";

}

.am-icon-th-list:before{

content:"\f00b";

}

.am-icon-check:before{

content:"\f00c";

}

.am-icon-remove:before,

.am-icon-close:before,

.am-icon-times:before{

content:"\f00d";

}

.am-icon-search-plus:before{

content:"\f00e";

}

.am-icon-search-minus:before{

content:"\f010";

}

.am-icon-power-off:before{

content:"\f011";

}

.am-icon-signal:before{

content:"\f012";

}

.am-icon-gear:before,

.am-icon-cog:before{

content:"\f013";

}

.am-icon-trash-o:before{

content:"\f014";

}

.am-icon-home:before{

content:"\f015";

}

.am-icon-file-o:before{

content:"\f016";

}

.am-icon-clock-o:before{

content:"\f017";

}

.am-icon-road:before{

content:"\f018";

}

.am-icon-download:before{

content:"\f019";

}

.am-icon-arrow-circle-o-down:before{

content:"\f01a";

}

.am-icon-arrow-circle-o-up:before{

content:"\f01b";

}

.am-icon-inbox:before{

content:"\f01c";

}

.am-icon-play-circle-o:before{

content:"\f01d";

}

.am-icon-rotate-right:before,

.am-icon-repeat:before{

content:"\f01e";

}

.am-icon-refresh:before{

content:"\f021";

}

.am-icon-list-alt:before{

content:"\f022";

}

.am-icon-lock:before{

content:"\f023";

}

.am-icon-flag:before{

content:"\f024";

}

如下是展示的效果：

上fontawesome的官网下载相关的文件，那里也有例子说明的，说白了，这个fontawesome就是他们制作好的svg矢量图，然后通过content代码获取到相应的矢量图，在页面上展示，因为是矢量图，而且材料很丰富，所以很受欢迎。

给你发下我目录结构：

三、如何在页面中使用Font Awesome字体图标

很多人都会搜索：如何在PS上使用Font Awesome字体到这个博客，也许你们想搜索的并不是如何在Photoshop上使用fontawesome，而是如何将font-awesome应用到自己的前端开发项目中。

Font Awesome介绍

Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识，现在FontAwesome不仅仅可以在bt上使用，还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标，字体图标主要是支持自适应、可以使用字体的各种特性（比如变色、变大变小、字体阴影等）、减少数据加载、样式更容易定义等。

Font Awesome特性

一个字体文件， 369个图标。

不需要JavaScript要求：更快的载入速度

无限的可扩展性：可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。

自由免费：你可以将它应用到你的商业中。

CSS控制：轻松的定义图标的颜色，大小，阴影，和任何与CSS相关的特性。

完美的视网膜显示：使用矢量字体，这意味着他们可以完美的显示在高分辨率显示器中

为BootStrap而生：完全的兼容BootStrap新版3.0

桌面友好：你可以查看字体的样式列表

兼容屏幕阅读器：不像其他字体图标不兼容屏幕阅读器

Font Awesome的使用

你只需要到： fontawesome.io�0�2下载压缩包然后解压到你的项目中。

在你的HTML头部的head里面添加对相应的font-awesome的样式。

根据这里的案例开始你的项目。

如需兼容IE浏览器，可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

<!--[if IE 7]>

<![endif]-->

font awesome？如何应用Font Awesome矢量字体图标

一、如何使用Font Awesome字体图标

二、如何应用Font Awesome矢量字体图标

三、如何在页面中使用Font Awesome字体图标

你可能感兴趣的