CorePress主题-配置文档

主题文档

CorePress主题配置文档

菜单图标设置

CorePress 主题自带Font Awesome5 超过5000个图标可以使用,同时还支持阿里iconfont图标库,支持使用彩色图标

CorePress 主题自带Font Awesome5图标,无需额外操作,可以直接使用。

进入官方网站选择图标:https://fontawesome.com/v5/search

选择你喜欢的任意图标

图片[1]-CorePress主题-配置文档-达者之境

进入图标详情,复制代码内容:

<i class="fas fa-ad"></i>
图片[2]-CorePress主题-配置文档-达者之境

 

复制代码以后,进入WordPress,找到菜单,在导航标签填入内容,保存即可

图片[3]-CorePress主题-配置文档-达者之境

 

然后在首页即可看到图标样式,图标如果挨太近,就在文字前面打一个空格就行了

图片[4]-CorePress主题-配置文档-达者之境

更改图标颜色
Font Awesome图标支持单一颜色修改,只需要添加代码即可,例如,修改成其他颜色
只需要在之前的代码中:

<i class="fas fa-ad"></i> 修改为:<i class="fas fa-ad" style="color:#ff9900"></i>

可以使用在线颜色选择工具选择颜色:https://www.atool99.com/colorpicker.php

修改成功后颜色会变成指定色彩。

图片[5]-CorePress主题-配置文档-达者之境

使用阿里iconfont图标库

阿里彩色图标库,非常丰富,支持自选图标。

选择图标地址:https://www.iconfont.cn/collections/index

可以搜索任意想要的图标,然后在图标上面选择添加入库

图片[6]-CorePress主题-配置文档-达者之境


选择好以后,在顶部菜单点击购物车,你可以选择多个图标

图片[7]-CorePress主题-配置文档-达者之境

接下来选择好了很多个图标以后,点击添加至项目

图片[8]-CorePress主题-配置文档-达者之境

进入资源管理,找到添加的库,点击生成代码

图片[9]-CorePress主题-配置文档-达者之境

生成代码以后,会得到一段地址,复制这一段内容,添加到主题设置->插入代码

图片[10]-CorePress主题-配置文档-达者之境

CorePress设置中心
图片[11]-CorePress主题-配置文档-达者之境

接下来,在菜单添加如下代码

<svg class="icon" aria-hidden="true"><use xlink:href="#图标名称"></use></svg>


其中图标名称,在你的仓库找到图标点击复制代码
图片[12]-CorePress主题-配置文档-达者之境

最终代码为:

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-icon-test-copy"></use></svg>


将本内容填写至菜单标签里面

图片[13]-CorePress主题-配置文档-达者之境

首页菜单会显示彩色图标
图片[14]-CorePress主题-配置文档-达者之境

特别注意

新增阿里图标以后,需要进入阿里后台重新生成地址,并且填入主题里面。

[dh url=”https://www.adbgx.cn/” icon=”https://blog.adbgx.cn/wp-content/uploads/2024/12/cropped-logo_20241211_uugai.com-1733850027213-e1733850362435.png” des=”个人导航”]阿达导航[/dh]

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容