bootstrap如何使用字体图标

1.建立图标库

首先小编我先从阿里巴巴矢量库中选取几张图片，注册过的可以直接进行登录，然后点击需要的图片放入库中，建立一个文件进行下载，下载的文件是个压缩包，进入正确的路径中解压会看到文件中有多个子文件，我们只选择.eot、.svg、.ttf、.woff这四个文件，保存到自己需要开发的字体文件夹下，我的是fonts文件夹。

这里先在css样式中建立图标库

@font-face{

    font-family:"beida";//这里的beida根据自己的需要自己取名字。

    src:url("../fonts/MiFie-Web-Font.eot")  format("embedded-opentype"),

          url("../fonts/MiFie-Web-Font.svg")  format("svg"),

          url("../fonts/MiFie-Web-Font.ttf")  format("truetype"),

          url("../fonts/MiFie-Web-Font.woff")  format("woff")   

}

src是建立图标库的核心，url之间用逗号隔开，一直到最后一个，四个必须写完，缺一不可，每一个后缀都要和后面的format中的内容保持一致。

2.引用图标库

这里给大家介绍两种方法引用图标库。

①在html中引用

eg：在css样式中

        i{

        font-family:"beida";//这句代码必须写，这是引用图标库的关键，其他的根据自己的需要设置不同的样式；

        font-size:14px;

        color:red;

        }

在body中

   

    &#×e644;//   i   标签中的是某个图标的代码；

   

小编建议：这种方法不是很好，要是开发小型网站的话还是可以的，大型网站不建议用这种方法。

②用伪元素的方法引用图标库

  在css中

            i:before或者after{

                content：“\e644”;//这里是把方法一种的&#×去掉，换成了“”\“”,谨记用伪元素必须使用“”\“”,其他 样式 根据自己的需要。这里小编就不写了！

                        }

在body中