使用icomoon和iconfont添加字体图标

最新推荐文章于 2022-09-29 23:00:18 发布

Cosmoshfx

最新推荐文章于 2022-09-29 23:00:18 发布

阅读量335

点赞数

分类专栏：前端学习文章标签： css3

本文链接：https://blog.csdn.net/Cosmoshfx/article/details/115326352

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用icomoon和阿里矢量图iconfont来添加及使用网页图标。icomoon下载的字体文件需要放入HTML根目录，并在CSS中设置@font-face。图标可通过Unicode或伪元素的content属性引用。阿里iconfont提供了多种使用方式，Unicode编码在HTML和CSS中略有不同。两种服务均方便开发者实现矢量图标的显示。

摘要由CSDN通过智能技术生成

icomoon网址为 http://icomoon.io，外国网址打开较慢一些。点击想要的图标，下载完成后是一个.zip文件，解压后fonts文件夹要放到原html文件的根目录中，在style中贴上style.css中的第一段代码。

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?kqb326');
  src:  url('fonts/icomoon.eot?kqb326#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?kqb326') format('truetype'),
    url('fonts/icomoon.woff?kqb326') format('woff'),
    url('fonts/icomoon.svg?kqb326#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

对使用了该字体图标的标签样式写font-family: 'icomoon';，标签中的字体图标的写法是：从demo.html中打开，复制小框框；或者在标签中写&#xe9da，均能实现效果。

在这里插入图片描述
如果写在before或者after伪元素选择器中，在content: " "中可以复制小框框，也可以写\e9da；均能实现。

div::after {
        position: absolute;
        content: "";
        /* content: "\e901"; */
        font-family: 'icomoon';
        top: 15px;
        right: 10px;
        color: red;
    }

实现效果如下：
在这里插入图片描述

国内矢量图可以使用阿里矢量图iconfont，网址为http://www.iconfont.cn/，别少打字母哈，我第一次少输了一个字母，进错了网站哈哈哈哈哈哈哈哈哈哈。这个提供了三种使用方式，第三种可以使用多种颜色，只是兼容性差一些，他的网页有写每种方式的使用说明。我这里用的是第一种Unicode。下载后，将font文件夹放于根目录下，将iconfont.css文件第一段复制一哈，像icomoon的使用一样。只是iconfont提供的字体编码是给了&#x的，因此写在中的标签时复制字体编码即可，用在content中时，将&#x，换成反斜杠\即可。

在这里插入图片描述