添加新的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文章,给我个鼓励,谢谢大佬

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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值