字体图标

最新推荐文章于 2025-07-11 21:34:19 发布

原创最新推荐文章于 2025-07-11 21:34:19 发布 · 4.7k 阅读

4 ·

CC 4.0 BY-SA版权

前端页面的坑专栏收录该内容

50 篇文章

订阅专栏

字体图标(iconfont) 后缀名svg

1.字体图标可以做透明、旋转等图片可以做的事情；

2.本质是文字，可以很随意改变颜色、产生阴影、透明效果；

3.本身体积小，携带的信息没有削减；

4.几乎支持所有浏览器；

5.移动设备必备；

使用流程：

1.ui设计字体图标效果图（svg）

工具：

2.前端人员上传生成兼容性字体文件包；

3.前端人员下载兼容性字体文件包到本地；

4.把字体文件包引入到html页面中；

解压上图中下载的压缩包，将文件夹中的font 文件夹复制到项目路径中。然后进行下面的操作，注意：

font文件夹的路径要和font-face中src下面的路径一致。url中的文件名也要和font-face中src中的一致。font-family 的名称可以任意。后面在仰视中使用的名称要和这里定义的一致。

文字图标的使用方法有两种，如图。

增加项目文字图标的方法：

找到如图文件：

将此文件导入到网站中：

然后重复上面的导出和下载、使用操作。

使用案例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
   @font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
span {
    font-family: "icomoon";
    font-size: 100px;
    color: pink;
}
div::before {
    font-family: "icomoon";
    font-size: 100px;
    color: hotpink;
    content: "\e91b";