wodpress使用symbol引用阿里图标

阿里图标：https://www.iconfont.cn/

先去官网注册一个账号，资源管理里面创建一个我的项目

然后去首页搜索你需要用的图标添加至购物车

在购物车里面把图标添加到我们创建的项目里面

注意顶部选择Symbol，查看在线链接，生成需要引用的js

回到wordpress里面，将下方代码插入到你的主题自定义代码里面（这种主题更新的话不需要重新设置）

或者主题目录下footer.php文件里面（如果更新主题需要重新添加）

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

引用到网站里面，举个例子，打开wordpress外观菜单，将图标代码插入到导航前面就行了

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

其中#icon-fenlei-remen是你图标的名称，icon123标签是防止和主题css冲突，图标大小可以在引用代码里面调数值，注释都很清楚

注意：往我的项目里面每次添加图标，或修改大小或名字，都需要重新生成在线js代码，不要忘记替换。