添加新的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图标的方法（看了就会）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。