font-Awesome使用指南

对font-awesome的理解:

font-awesome和很多其他矢量字体图标一样,可以用在各响应式和移动端网站上。它和bootstrap的Glyphicons 字体图标组件性质类似,在图标数量上优于Glyphicons字体。

如何导入font-awesome字体到本地工程:

1.在官网首页下载font-awesome字体包到本地,官网地址:http://fontawesome.dashgame.com/#basic

font-awesome下载地址

2.把下载下来的字体包解压,并把文件夹复制到本地工程根目录。如图为文件结构(下载压缩文件内包括压缩后的css文件和源码css文件,在工程内可使用压缩处理过的css文件):

font-awesome文件结构


3.在界面内引入样式文件,link内文件地址为文件的相对地址,如图:

font-awesome样式文件引用

4.使用规则和代码:

可以用i标签和span标签引用字体,在html标签语义上,span标签更符合使用语义。使用时,先给元素加上“.fa”的基础字体样式,然后加上“.fa-想要使用的图标名称”。字体可按倍数缩放,具体规则请参考官网说明。用户可自行设定颜:色大小等属性,同一般的字体属性设置。以使用heart这个字体图标为例:

基础引用:<span class="fa fa-heart"></span> 或<i class="fa fa-heart"></i>

放大图标:<span class="fa fa-heart fa-lg"></span>(倍数放大用fa-数字+x)

设置属性:如定义了红色字体为:font-red,12号字体大小为f12,则应用到此图标上可以写成<span class="fa fa-heart font_red f12"></span>

还有其他问题的童鞋大可访问:http://fontawesome.dashgame.com/#basic 进行更详细的学习。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容