Font Awesome图标的介绍与应用

1、介绍

  Font Awesome 是一套图标字体库及CSS框架，主要目的是和Bootstrap搭配使用，可以通过CSS提供的特性设置大小，颜色，阴影等

  图标库：http://www.fontawesome.com.cn/faicons/

  官网：https://fontawesome.com/?from=io

  另一个常用的图标库是阿里矢量图标库https://www.iconfont.cn/

2、引用

• 将以下代码粘贴到网页HTML代码的 部分.

  <link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  

• 复制整个font-awesome文件夹到项目中，通过相对路径引用

3、使用方法

• 先在中引用图标库
• 打开图标库的页面：http://www.fontawesome.com.cn/faicons/

• 找到对应的图标点击进入，有复制图标名称和复制源码两个选项，可以直接复制源码，把图标放在任意的位置

• 设置图标的属性：http://www.fontawesome.com.cn/examples/

4、案例

<div class="icon-bar">
        <a href="#" class="active"><i class="fa fa-home">i>a>
        <a href="#"><i class="fa fa-search">i>a>
        <a href="#"><i class="fa fa-envelope">i>a>
        <a href="#"><i class="fa fa-globe">i>a>
        <a href="#"><i class="fa fa-trash">i>a>
    div>

    
    "UTF-8">
    "X-UA-Compatible" content="IE=edge">
    "viewport" content="width=device-width, initial-scale=1.0">
    
    /*引用*/
    
    

运行结果：