bootstrap如何使用字体图标

匿名 (未验证) 提交于 2019-12-03 00:30:01

1.建立图标库

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

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

@font-face{



}

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

2.引用图标库

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

①在html中引用

eg:在css样式中




在body中




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

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

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


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!