阿里iconfont使用方法

很多大佬都分享了此方法,但是还有很多同学很迷茫.

废话不说,下面以本站为例,开整:

第一步:打开  www.iconfont.cn  并 注册/登录 !

第二步:找到合适的icon,(建议用多色,)鼠标放到icon上会出现几个选项,点击购物车图标.把icon添加入库.(可以添加多个,但是需要一个一个添加)

第三步:图标选择完成后,在右上角找到购物车图标,(会有红色角标,就是添加icon的数量.)点击进入会在右侧弹出窗口.

第四步:点击弹出窗口中,添加至项目,再点击右侧+号新建项目.输入项目名称.(可中文).点击确定!

第五步: 此时已进入项目,找到 Symbol 点击进入, 会出现 红色字体 ”暂无代码,点此生成”   ,点击即可生成连接.

第六步:想生成的连接放入头文件中.(主题根目录 header.php 中 ) 以B2为例,可放入第13行.

格式为

<script src="刚刚生成的连接"></script>

 

已本站为例

<script src="//at.alicdn.com/t/font_2696731_fbdj49dums.js"></script>

 

本站图标库地址为   mrxu.net/fonts

第七步: 将下列css样式放入 style.css文件中

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

第八步:使用时格式为

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

XXX为图标下方名称.

已本站为例(第一个图标店铺)格式为:

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

 

找到相应位置.直接替换春哥之前图标即可.

企业微信截图_20210806113305.png

温馨提示:

1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请联系站长处理!

2.如果您喜欢我们,可开通终身会员,享受全站资源免费下载!

3.本站所有内容只做学习和交流使用。 版权归原作者所有。

葵花宝典

移动端底部导航小修改

2021-7-27 10:33:40

葵花宝典

B2首页列表文字前自定义图标

2021-12-23 15:21:30

3 条回复 A文章作者 M管理员
  1. jdxs

    字体也用的阿里的?

    • admin

      不是,字体自己找的.

  2. mua

    不错

点我打卡

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索