WordPress使用symbol 引用阿里图标

  • A+
所属分类:WordPress技巧
Wordpress使用symbol 引用阿里图标

官网:https://www.iconfont.cn/

打开官网,注册账号,搜索你需要的图标

Wordpress使用symbol 引用阿里图标

这里演示随便选择一个图标,添加入库

Wordpress使用symbol 引用阿里图标

右上购物车图标点开,添加至项目,如果你没有就新建一个项目

Wordpress使用symbol 引用阿里图标

找到资源管理,我的图标,我的项目,已添加图标的项目。选择Symbol,查看在线链接

Wordpress使用symbol 引用阿里图标

将下方代码引用到wordpress里面,我这边放的位置是主题自定义代码里面,这样每次更新主题不需要重新部署。如果你的主题没自定义代码设置,放到主题文件footer.php里面随便插入到</div>下方,路径:根目录/wp-content/themes/主题/footer.php

<script src_old="//at.alicdn.com/t/c/font_2653935_tf4g1f92jb.js"> /* 每次更新项目里面图标,需要重新生成链接更换 */</script> 
<style type="text/css">
    .icon {
       display: inline-block; /* 将图标设置为内联块级元素,以便水平居中 */
       width: 1.5em; /* 增大图标的宽度 */
       height: 1.5em; /* 增大图标的高度 */
       line-height: 1.5em; /* 设置行高与图标高度相等,以便垂直居中 */
       text-align: center; /* 将文本内容水平居中 */
       vertical-align: middle; /* 垂直居中 */
       fill: currentColor; /* 设置图标的填充颜色为当前文本颜色 */
       overflow: hidden; /* 控制溢出行为 */
    }
</style>

引用到wordpress菜单,比如icon-xiazai插入到图标代号里面

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-图标代号"></use>
</svg>
Wordpress使用symbol 引用阿里图标

wordpress外观菜单里面,在导航标签前面加以上代码,然后到前台刷新缓存就有图标了。图标大小调整,引用代码里面标注了,更改数值就可以调整

Wordpress使用symbol 引用阿里图标
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: