wordpress:CorePress 主题菜单图标设置教程
菜单图标设置
CorePress 主题自带Font Awesome5 超过5000个图标可以使用,同时还支持阿里iconfont图标库,支持使用彩色图标。
使用Font Awesome5
CorePress 主题自带Font Awesome5图标,无需额外操作,可以直接使用。
1.进入官方网站选择图标:https://fontawesome.com/v5/search
选择你喜欢的任意图标
进入图标详情,复制代码内容:
adUpdated:Version5.10.2SolidStyle(Fas)Marketing<iclass-"fasfa-ad>x/i>f641ADAdAdADAdADADAdADAdStartUsingThislconThankstoSuppleforsponsoringthisicon!
image.png
复制代码以后,进入WordPress,找到菜单,在导航标签填入内容,保存即可
评论菜单结构添加菜单项外观页面菜单名称顶部菜单主题文章自定义拖放各个项目到您喜欢的顺序,点击右侧的箭头可进行更详细的设置.小工具自定义链接菜单siclass-"fasfa-ad'k/i>软件使用分类目录分类目录主题编捐器导航标签插件siclass-"fasfa-ad"></i2软件使用查看所有搜索最多使用用户CSS类(可选)软件使用工具electron移动至下一位JavaScript设置未分类原始:软件使用kotlin主题设置软件资源移除/取消收起菜单wordpress绿化破解分类目录electron添加到菜单全选分类目录Javascript未分类分类目录
image.png
然后在首页即可看到图标样式,图标如果挨太近,就在文字前面打一个空格就行了
未分类Javascriptelectron软件使用applekAdCorepress主题,一款强大的免费的CMS类主题,适合个人博客,极客等,前端无界面框架,加载迅速.lovestu下手的情违国W味道H每祥制售地N购香象的了解Cordoress精v1出9月525TDO4DOETUDA0程ON烧都园址国99根704L638龙国热特的工月修的小理南路农司
image.png
更改图标颜色
Font Awesome图标支持单一颜色修改,只需要添加代码即可,例如,修改成其他颜色
只需要在之前的代码中: 修改为:
可以使用在线颜色选择工具选择颜色:https://www.atool99.com/colorpicker.php
修改成功后颜色会变成指定色彩。
软件使用electronJavascript未分类applekCorePress主题,一款强大的免费的CMS类主题,适合个人博客,极客等,前端无界面框架,加载迅速.道该从何下手的情lovestu玛麻址鞋鞋程身锡中地能管中窥象的了解COFcPres捷1E1985O68lnO4DoE定丽型梦沙转品测试浙址路超迎园火童龙园店址咨国线W万国丽你的工修,月一方量批的小墙顺道路农司
image.png
使用阿里iconfont图标库
阿里彩色图标库,非常丰富,支持自选图标。
选择图标地址:https://www.iconfont.cn/collections/index
可以搜索任意想要的图标,然后在图标上面选择添加入库
"代码"2627icons所有颜色所有图标全部简约扁平精美手绘面性线性/代码代码代码(1)代码代码代码代码代码代码国</>I>代码代码代码代码代码代码代码(1)代码代码代码代码代码代码代码代码代码-zqr3代码代码代码代码代码代码代码代码代码代码
image.png
选择好以后,在顶部菜单点击购物车,你可以选择多个图标
1代码
image.png
接下来选择好了很多个图标以后,点击添加至项目
键清除.代码精美I>代码代码代码代码添加至项目下载素材代码代码下载代码加入新项目代码代码zhuti代码代码<>人确定取消
image.png
进入资源管理,找到添加的库,点击生成代码
ICOnfont插画库帮助资源管理图标库活动首页请搜索图标和人NEW果核剥壳我的收藏我的资源我的项目zhuti1个图标我发起的项目68批量操作回收站更多操作2021-01-18zhuti收起在线链接上传图标至项目下载至本地UnicodeFontclassSymbolcorepress宝我参与的项目暂无代码,点此生成我删除的项目代码icon-icon-test-co...
image.png
生成代码以后,会得到一段地址,复制这一段内容,添加到主题设置->插入代码
zhuti我发起的项目个图标批量操作更多操作2021-01-18回收站zhuti收起在线链接上传图标至项目下载至本地UnicodeSymbolFontclasscorepress宝我参与的项目点此复制代码我删除的项目/at.alicdn.comt/font2333437l.js代码icon-icon-test-co...
image.png
CorePress设置中心页头代码请输入内容常规设置首页设置添加在页面head前的代码6文章设置页脚代码请输入内容评论设置功能模块在文章未尾添加的代码自定义CSS请输入内容用户中心外观设置阿里lconfont地址//at.alicdn.com/t/font2333437js优化加速自定义阿里云图标Symbol地址,设置以后可以调用自选的阿里云图标.SEO设置<svgdlass-iconriahiddentueuexink"标名称e插入代码关于主题
image.png
接下来,在菜单添加如下代码
其中图标名称,在你的仓库找到图标点击复制代码
zhuti我发起的项目批量操作回收站个图标2021-01-18zhuti收起在线链接UnicodeFontclasssymbolcorepress国我参与的项目点此复制代码我删除的项目/at.alicdn.com/t/font2333437js复制代码
image.png
最终代码为:
将本内容填写至菜单标签里面
页面菜单名称顶部菜单拖放各个项目到您喜欢的顺序,点击右侧的箭头可进行更详细的设置.查看所有搜索最近大家好口口口口口口口<iclass-"fasfa-ad"分类目录UsersListltemstyle-"'color:#ff9900">软件使Users用ProfileChangePassword分类目录<svgclass-"icon"aria-ResetPasswordhidden-"true'"><usexlink:href-"#icon-icon-test-copyForgotPassword?electronAccount添加到菜单全选已航标达"icon"aria-hidden-"true"><usexlink.href-"#icor<svgclass-"ic文章CSS类(可选)自定义链接移动至上一位下一位siclass-"fasfa-adstyle-"color#ff9900">/i软件使用最顶分类目录
image.png
首页菜单会显示彩色图标
未分类Javascript软件使用electronAdapplek?CorePress主题,一款强大的免费的CMS类主题,适合个人博客,极客等,前端无界面框架,加载迅速.该从何下手的情lovestu有祥制抗香纯R身鱼中窥象的了解CorcPress量1E地月送线日一823420定丽型味中P鑫转店
image.png
特别注意
新增阿里图标以后,需要进入阿里后台重新生成地址,并且填入主题里面。
作者:admin
文章地址:http://www.yufeir.com/709.html
邮箱:yufeir@163.com
本站所有资源来自网络,如有侵权,请联系站长删除!