让我来教你使用css中的字体图标的方法

以上的font-family是我们自己定义的，需要在url中引入这些文件，url()中的单引号里面是这些文件相对于这些css文件的url地址，里面的#iefix、#iconfont不能少，其中#iefix是固定不变的，而#iconfont中的名称是font-family中的名称，他们需要加在相应文件名称的后面，format()中的内容不能变，你可以先把上述的内容复制到你自己的里面，只根据后缀名去更改相应的url地址就可以了，别乱改不然会出错，由于我们会多次使用里面的图标，所以我们需要把某些属性放在公共的class中，如下所示：

[class^="icon-"], [class*="icon-"] { font-family: 'iconfont'; font-style: normal; }

这代表只要class中包含有icon-就会有font-family和font-style属性，该font-family的名称就是@font-face中的font-family中的名称，如果我们需要使用该class属性的话，那就htm文件中的元素的class里面加入以icon-开始的名称，如下所示：

之后我们就可以设置相应的图标了，一般是利用伪元素来设置，在css中可以这样设置：

至于里面的content内容，前面的是固定的，后面的e799是这里来的，我们回到iconfont官网，找到我们项目中的图标，在上面停留之后，点击编辑图标：

复制“Unicode(16进制)”下面的内容：

这就完成了

如果你不想下载到本地的话，你也可以使用在线Unicode编码，首先我们找到iconfont官网中上述项目那个界面，点击“Unicode”，然后点击“暂无代码，点此生成”，之后我们就可以看到一个链接：

复制链接内容，这样我们就不需要复制文件到项目中了，只需要把上述链接内容放置到css文件里面：

@font-face { font-family: 'iconfont'; /* project id 2074612 */ src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot'); src: url('//at.alicdn.com/t/font_2074612_ndaz958615n.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff2') format('woff2'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.woff') format('woff'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.ttf') format('truetype'), url('//at.alicdn.com/t/font_2074612_ndaz958615n.svg#iconfont') format('svg'); }

之后就在css中写：

[class^="icon-"], [class*="icon-"] { font-family: 'iconfont'; font-style: normal; }

之后还要写上，content中的内容到底是什么在上面有详细说明，不在赘述：

.icon-tianmao::before { content: 'e799'; }

然后html文件中的它也不能少，这些都在第二种方法中有详细解释，这里就 不在赘述了：

<i class="icon-tianmao"></i>

到此这篇关于让我来教你使用css中的字体图标的方法的文章就介绍到这了,更多相关css字体图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：源码网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!