添加新的iconfont图标的方法（看了就会）

一、用Unicode引入新iconfont图标

Unicode方法引入只需要保留下载的.tff、woff、woff2等字体文件，其他文件都是无关的

1.将阿里给的@font-face{…}复制到你项目使用的css文件下。

2.确保项目css文件中的url(…)能找到字体文件。
例：

@font-face {font-family: 'iconfont';src: url('iconfont.ttf?t=1623464492959') format('truetype');}

定义字体样式的代码：
（新添加就不需要重新添加一遍了）

  .iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

3.直接使用：

<span class="iconfont">&#*****</span>

二、用Font-class方法引入新iconfont图标

用Font-class引入图标只需要保留下载的iconfont.css和iconfont.tff、iconfont.woff、iconfont.woff2等字体文件，其他文件都是无关的

1.把新图标的下载的iconfont.css文件中的@font-face{…}代码和定义图标类名的代码剪切到旧iconfont.css文件。

定义图标类名的代码如下：

.icon-jiantou1:before {content: "\e608";
}

2.确保iconfont.css中的url(…)能找到字体文件。

3.然后就可以直接使用。

<span class="iconfont icon-xxx"></span>

三、用Symbol方式引入新iconfont图标

用Symbol引入图标只需要保留下载的iconfont.js文件，其他文件都是无关的

1.把新图标中下载的iconfont.js文件中svg标签里的所有内容都剪切到旧iconfont.js文件的svg标签中。

如下：

<symbol id="icon-star1" viewBox="0 0 1024 1024"><path d="M512 736.981333 775.68 896 705.92 596.096 938.666667 394.410667 631.850667 368.085333 512 85.333333 392.149333 368.085333 85.333333 394.410667 318.08 596.096 248.32 896Z"  ></path></symbol><symbol id="icon-jiantou1" viewBox="0 0 1024 1024"><path d="M317.53565009 427.73164886c0-8.83499123 3.4992003-17.0635663 9.84922787-23.17024423 12.76215126-12.28887814 33.15932821-11.91070717 45.4649891 0.84584985l140.08325302 145.33624916L650.93195739 404.87020696c12.19321655-12.87571445 32.58927465-13.44520859 45.47561816-1.26877477 6.391425 6.06248338 10.0556555 14.58755344 10.05565551 23.38338494 0 8.2498332-3.11935105 16.09520249-8.78799959 22.09279262L536.65775399 619.31664082c-9.47609172 10.03607566-24.39258676 12.69949573-37.10830582 6.62470502-0.9538188-0.43691055-1.68666489-0.94710568-2.10399557-1.24807609a36.86048075 36.86048075 0 0 0-0.78263488-0.41844953c-1.533942-0.81116553-3.57192548-1.88693886-5.5131285-3.74087167l-0.12587051-0.12195455c-0.11691972-0.11356318-0.22209153-0.2260075-0.32055025-0.33006046a11.08835315 11.08835315 0 0 1-1.45953854-1.21674829L326.5390281 450.05380553c-5.80794523-6.03898755-9.00449686-13.96435453-9.00449685-22.32159726z"  ></path></symbol>

2.然后就可以直接使用了。

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

这是第一篇csdn文章，给我个鼓励，谢谢大佬

如果有补充或发现错误，留下你的评论。

添加新的iconfont图标的方法（看了就会）相关推荐

iconfont怎么添加新的字体图标？
因为项目新增功能需要加入新的iconfont图标,然而因为不知道原先所有iconfont文件所在项目不能整体重新下载,只好单独添加新的图标. 具体步骤见截图. 1----在iconfont官网找到对应 ...
iconfont图标引入方法
iconfont图标引入方法图标库链接阿里巴巴矢量图标库链接: [https://www.iconfont.cn/](https://www.iconfont.cn/). 使用方式引入方式添加 ...
微信小程序如何添加新的icon图标
微信小程序如何添加新的icon图标第一步先去阿里云下载图标http://www.iconfont.cn/ 根据需要把图片的代码下载下来,下载完成之后是一个压缩包,解压压缩包里面有一个css的文件 ...
linux服务器插上硬盘不能开机,Linux服务器添加新硬盘无法识别解决方法（无需重启）...
Linux服务器添加新硬盘无法识别解决方法(无需重启) 发布时间:2018-08-24 19:45, 浏览次数:711 , 标签: Linux 前言一般来说,当我们在服务上插入新的磁盘时,服务器是会 ...
uboot中添加新型号步骤以及编译方法
一.添加新型号的支持: 1.在board.cfg 添加需要支持的型号: 2.在include/configs下添加支持新型号的.h文件: 二.uboot编译方法: 1.配置编译的环境变量: expor ...
DataGridView动态添加新行的两种方法
简单介绍如何为DataGridView控件动态添加新行的两种方法: 方法一: int index=this.dataGridView1.Rows.Add(); this.dataGridView1. ...
windows 7中添加新硬件的两种方法（本地回环网卡）
最近在windows7上使用VMwareWorkstation7玩一些实验,遇到需要配置不同网络的问题. 因为在windows2003server上习惯使用要本地回环网卡了,那就想着在Windows7 ...
python删除类方法_python中向类中动态添加新特性及删除属性方法
class Foo(object): pass obj = Foo() # 添加对象属性(对象名追加对象属性) obj.a = 100 # print(obj.a) # 添加类属性(类名称追加类属性) ...
python中向类中动态添加新特性及删除属性方法
class Foo(object): pass obj = Foo() # 添加对象属性(对象名追加对象属性) obj.a = 100 # print(obj.a) # 添加类属性(类名称追加类属性) ...