- A+
所属分类: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外观菜单里面,在导航标签前面加以上代码,然后到前台刷新缓存就有图标了。图标大小调整,引用代码里面标注了,更改数值就可以调整
- 我的微信
- 这是我的微信扫一扫
- 我的微信公众号
- 我的微信公众号扫一扫