建网站如何使用Font Awesome字体图标

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

下面是自己建网站时，使用Font Awesome字体图标的步骤

1.到Font Awesome官网下载最新版本的Font Awesome；（也可以不下载，直接使用远程字体库。方法见：自己做网站怎么使用字体图标）

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

3.在需要应用的html或者其它类型的页面中引入样式文件，如下：（如果不了解HTML知识，请学习html视频教程）

<link href="css/font-awesome.css" rel="stylesheet" />

4.修改CSS中的路径。打开font-awesome.css文件，若是引用的是紧缩版的，就打开font-awesome.min.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定义好的样式为须要添加矢量图标的元素指定样式。

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-cog fa-spin"></i>

<i class="fa fa-car"></i>

<i class="fa fa-car fa-3x"></i>

这样就可以在我们自己建网站时使用Font Awesome字体图标来替代背景图片了。

标签： 建网站 网站制作

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。