WordPress使用symbol 引用阿里图标

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="//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 引用阿里图标

给TA打赏
共{{data.count}}人
人已打赏
WP教程网站教程

WordPress新手需要注意的一些事

2024-2-21 21:31:12

WP教程网站教程

Wordpress隐藏后台登录地址

2024-3-12 19:58:48

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索