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

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

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

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

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

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

格式为

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

已本站为例

<script src="//at.alicdn.com/t/font_2849804_7u1fv8wje5.js"></script>  #src前有空格,复制后记得加上

第七步: 将下列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为图标下方名称.

分类: skill+ 标签: wordpress

评论