您的位置：首页 > Web前端 > BootStrap

bootstrap如何使用字体图标

2018-06-19 21:10 134 查看

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中

    <body>

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

    </body>

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

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

  在css中

            i:before或者after{

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

                        }

在body中<body><i></i></body>


阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航