WordPress使用iconfont图标库美化教程

为什么选择iconfont图标?

相比Font Awesome来说,阿里iconfont图标样式更多,更贴近国人审美,且有彩色图标,利于美化站点。

使用方法

1.注册并登录

在使用之前你需要去到阿里iconfont注册一个账号,操作方法如下:

WordPress使用iconfont图标库美化教程,2d40bcfd13507089.png,教程,技术,代码,WordPress,美化,第1张

               这里需要使用Github或者微博登录

WordPress使用iconfont图标库美化教程,ac5376ecf5b784c0.png,教程,技术,代码,WordPress,美化,第2张

2.挑选图标

这里注意尽量选全,因为之后每一次新增图标都要重新生成代码,比较麻烦

WordPress使用iconfont图标库美化教程,b41a1344b36afc61.png,教程,技术,代码,WordPress,美化,第3张

挑选完成后选择“添加到项目”,如果还没有项目就新建一个(记得一定要记住项目名)

WordPress使用iconfont图标库美化教程,730438c0eed1693f.png,教程,技术,代码,WordPress,美化,第4张

3.获取代码

WordPress使用iconfont图标库美化教程,3b7441f850eaeabb.png,教程,技术,代码,WordPress,美化,第5张

4.添加代码

在网站的自定义代码区域添加如下代码(这里拿子比主题为例)

<script src="这里写你刚刚复制的代码"></script>

如图,若你想在菜单里添加图标:

WordPress使用iconfont图标库美化教程,IMG_20220405_003845.png,教程,技术,代码,WordPress,美化,第6张

5.使用图标

选择你想添加到网站的图标(必须在项目库里)

WordPress使用iconfont图标库美化教程,a08a320fbc419d52.png,教程,技术,代码,WordPress,美化,第7张

在你想要的地方,加入如下代码

<svg class="icon" aria-hidden="true"><use xlink:href="复制的图标代码"></use></svg>

如图,若你想在菜单里添加图标:

WordPress使用iconfont图标库美化教程,IMG_20220405_003821.png,教程,技术,代码,WordPress,美化,第8张

效果如同本站


相关文章

您需要 登录账户 后才能发表评论

发表评论 取消回复

电子邮件地址不会被公开。 必填项已用*标注