icon字体图标自行添加具体过程

官方动态功能建议插件模块风格模板问题反馈技术交流站长杂谈代码共享 V系列产品运营交流

分享 收藏 举报: X

icon字体图标自行添加具体过程

袁冬 消费160.85元 2020-11-04 11:08 11:08

普通粉丝

1072: 24

下面我以今天给一位站长好友添加得过程为例说明

首先找到/public/static/icon 下得 icon目录

一、把字体文件复制到fonts文件夹里

二、把下载回来得字体文件内得样式文件*.css得内容复制到官方icon.css里，但是要注意一点类名称有没有和之前得重复！同时修改字体文件得路径，按你字体文件得存放路径修改。

$I{$_M`IUF4Q7)}BDP9(3XVC.png$

三、然后用cscode 或者dw 或者支持utf8得编辑器打开index.html 和icon.css文件

index.html我这里大约是69行是图标得div，同理自行找到这些标签就可以。

把图标代码修改一下例如下面得：

改为下面得
<div><i class="icon iconfont icon-tiaodan-xianxing"></i> </div>

有多少个图标就需要按照官方得写法修改。

四、如果字体还有用到js

那么要把js文件也加到index文件得底部去

我这里是把js文件放到与css文件同目录得，强迫症得患者可以再建立一个js目录放进去，那么这里就是js/icon font.js

实际js一般是用不到得可以不添加试试图标是否显示正常不正常再加这个也可以。

到此添加过程就完毕了，可以去后台看看需要添加图标得地方是否正常了

赏礼

赏钱

点击回复

全部留言

共 24 条

Wisdom 白金粉丝消费:358.18元 2020-12-10 18:34 18:34
三星
6楼

阿里下载图标，加入购物车只能一个一个的加吗，不能够一个合集的加吗？

袁冬 消费:160.85元 华为 2020-12-10 18:36

应该可以的

悦美乐-4780 消费:7860.43元 其他手机 2020-12-10 18:38

选好加入购物车，在购物车那加入项目，在在项目上集体下载，好像是这样，几个月没上了

Wisdom 消费:358.18元 2020-12-10 19:10

@悦美乐-4780 从购物车可以批量加入项目，但加入购物车好像只能一个一个的来

Wisdom 消费:358.18元 2020-12-10 19:19

f12

var iconList = document.querySelectorAll('.icon-gouwuche1');
for (var i = 0; i < iconList.length; i++) {
iconList[i].click();
}

运行这一行代码可以

0 赏礼回复

A+

黄河風℡₁₅₃⁸³⁵⁹7⁷⁹⁹ 实战运营者消费:1618.57元 2020-12-01 08:16 08:16
小米
6楼

找些适合购物类网站用的字体图标，或者提供下怎么找，一直没找到！

袁冬 消费:160.85元 2020-12-01 08:44

阿里  或者在可以在线生成字体图标得网站生成

袁冬 消费:160.85元 2020-12-01 08:45

或者去哪些购物网站扒

黄河風℡₁₅₃⁸³⁵⁹7⁷⁹⁹ 消费:1618.57元 小米 2020-12-01 09:00

@袁冬   那好吧，看来还是自己生成的才符合自己的

袁冬 消费:160.85元 2020-12-01 09:05

@黄河風℡₁₅₃⁸³⁵⁹7⁷⁹⁹   都可以得   看好得图标扒过来也一样

袁冬 消费:160.85元 2020-12-01 09:06

@黄河風℡₁₅₃⁸³⁵⁹7⁷⁹⁹  字体图标是不受像素限制得    对于适应各个终端是最合适得

袁冬 消费:160.85元 2020-12-01 09:45

@黄河風℡₁₅₃⁸³⁵⁹7⁷⁹⁹ https://www.cnblogs.com/hjvsdr/p/6639649.html ;    发你一个阿里图标库教程

袁冬 消费:160.85元 2020-12-01 09:47

@黄河風℡₁₅₃⁸³⁵⁹7⁷⁹⁹  另外官方用得这个字体库  你可以都更新进去  总共应该接近700个图标
https://fontawesome.dashgame.com/

袁冬 消费:160.85元 2020-12-01 09:47

阿里图标库  https://www.iconfont.cn/

黄河風℡₁₅₃⁸³⁵⁹7⁷⁹⁹ 消费:1618.57元 2020-12-01 10:27

@袁冬   谢啦！

袁冬 消费:160.85元 其他手机 2020-12-01 10:30

@黄河風℡₁₅₃⁸³⁵⁹7⁷⁹⁹   祝玩的愉快

0 赏礼回复

袁冬普通粉丝 消费:160.85元 2020-12-01 10:01 10:016楼

使用字体图标时需要注意

Unicode 和 Class方式只支持单色、 Unicode 支持ie6+浏览器、Class支持ie8+浏览器，
而Symbol（svg）支持多色，但是只支持ie9及以上浏览器，同时浏览器渲染svg性能目前普遍较弱很多浏览器渲染svg性能还不如png；
目前如果没有多色渲染要求，建议还是使用Class方式书写起来更直观，语义更明确。