零基础建站培训介绍

当前位置:

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

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

Font Awesome字体图标
下面是自己建网站时,使用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字体图标来替代背景图片了。

上一课: 下一课:

发表评论

相关教程

  1. 我们需要找人建网站的,谁可以帮忙?
  2. 如何在公司局域网里建网站 怎么建立局域网网站
  3. 本地搭建和空间里建网站有什么区别
  4. 有目标才会让新手学建网站有动力
  5. 我想建网站需要什么
  6. 自己的电脑可以做服务器空间建网站吗?
  7. 本地搭建和网络上建网站有什么区别
  8. 建网站选择海外服务器的优势
  9. 合肥网络公司网站如法泡制
  10. 我是个新手对建网站不太懂,想学这方面系统的课程