WordPress菜单栏使用阿里巴巴Iconfont图标 用CSS使用Iconfont矢量库图标教程
本次以用CSS实现菜单栏图标为基础来写本文章:

1、进入网站之后,搜索想要的icon图标 https://www.iconfont.cn/

2、选择所需要的所有icon添加入库,可以点击上方的库存,将所有icon添加到某个项目

WordPress菜单栏使用阿里巴巴Iconfont图标 用CSS使用Iconfont矢量库图标教程

WordPress菜单栏使用阿里巴巴Iconfont图标 用CSS使用Iconfont矢量库图标教程

3、建好后在我的项目中,选择刚刚添加的项目,然后点击 Font class 生成代码

WordPress菜单栏使用阿里巴巴Iconfont图标 用CSS使用Iconfont矢量库图标教程
4、引入图标:将生成的CSS代码的链接地址引入前端样式,比如主题的相应位置

<link rel="stylesheet" href="你生成的CSS代码地址">

WordPress菜单栏使用阿里巴巴Iconfont图标 用CSS使用Iconfont矢量库图标教程

5、在页面中引用进来,比如菜单栏

<i class="iconfont icon-ai" ></i>

WordPress菜单栏使用阿里巴巴Iconfont图标 用CSS使用Iconfont矢量库图标教程

其中icon-ai为图标代号,就是从阿里icon上面复制下来的代码

最后说一下,每次重新添加或者删除这个项目中的图标之后,都应该重新将生成的CSS代码地址重新更新刷新, 然后引入的地址重新更改才有效哦。

本文来自投稿,不代表吾站网立场,版权归原作者所有,欢迎分享本文,转载请保留出处!

2021-05-13

2021-05-24

发表评论

表情 格式 链接 私密 签到
扫一扫二维码分享