WordPress导航菜单如何添加个性图标字体?
时间:2022年04月23日
/来源:网络
/编辑:佚名
WordPress为导航菜单添加个性图标字体
目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体。我们可以单独为导航菜单上的项目也配上个性化的图标字体。
具体方法:
一、WP后台–插件–安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用。
二、WP后台—外观—菜单,进入菜单设置页面,选择并编辑一个菜单项,在CSS类中输入一个图标字体选择器名称,如图:

如果在编辑菜单项目面板中无CSS类,可以打开右上角的“显示选项”,在显示菜单高级属性中勾选“CSS类”。(今天才发现有这个的!!!)
图标字体选择器名称,打开此页查看:http://fortawesome.github.io/Font-Awesome/icons/
点开一个认为合适的图标字体,在下会显示类似:
<i class=”fa fa-home”></i>
只需在菜单CSS类中输入fa fa-home就可以了。
那然这个图标字体库并不只局限于使用在导航菜单上,只要把相应的图标代码加到主题模板的相应位置,也同样可以显示。
如果认为上面插件提供的图标字体不符合自己的要求(其实这套Font Awesome图标字体早已烂大街),还可以自己做一套更加个性化的图标字体。
图标字体在线制作:https://icomoon.io/app/#/select
目前图标字体非常流行,图标字体使用简单,与图片格式的小图标相比,支持视网膜显示,可以无限放大。特别是一些响应式设计的主题模板,都会或多或少使用图标字体。我们可以单独为导航菜单上的项目也配上个性化的图标字体。
具体方法:
一、WP后台–插件–安装插件页面搜索:Font Awesome 4 Menus,下载安装并启用。
二、WP后台—外观—菜单,进入菜单设置页面,选择并编辑一个菜单项,在CSS类中输入一个图标字体选择器名称,如图:

如果在编辑菜单项目面板中无CSS类,可以打开右上角的“显示选项”,在显示菜单高级属性中勾选“CSS类”。(今天才发现有这个的!!!)
图标字体选择器名称,打开此页查看:http://fortawesome.github.io/Font-Awesome/icons/
点开一个认为合适的图标字体,在下会显示类似:
<i class=”fa fa-home”></i>
只需在菜单CSS类中输入fa fa-home就可以了。
那然这个图标字体库并不只局限于使用在导航菜单上,只要把相应的图标代码加到主题模板的相应位置,也同样可以显示。
如果认为上面插件提供的图标字体不符合自己的要求(其实这套Font Awesome图标字体早已烂大街),还可以自己做一套更加个性化的图标字体。
图标字体在线制作:https://icomoon.io/app/#/select
新闻资讯 更多
- 【wordpress教程】WordPress跟踪记录访客在网站的搜索词 优化网站内容和搜索体验03-31
- 【wordpress教程】Zibll子比主题的用户中心修改头像增加支持上传PNG图片文件03-31
- 【wordpress教程】wordpress报错429怎么办03-28
- 【wordpress教程】wordpress如何批量删除指定分类目录下的所有文章03-23
- 【wordpress教程】Wordpress 在文章内容的第二段后面插入广告03-03
- 【wordpress教程】WordPress纯代码禁止发表重复标题的文章03-03
- 【wordpress教程】给wordpress博客-VIEU主题评论框添加打字特效(其他主题类似)03-03
- 【wordpress教程】wordpress自动批量定时发布插件 DX-auto-publish02-08
热门文章
- 178Moban源码谈谈免费源码与收费源码的区别
- 2帝国CMS忘记后台登陆用户名、密码、认证码的解决方法
- 3帝国CMS(EmpireCMS) v7.5后台任意代码执行漏洞及具体修复方法
- 4帝国CMS和WordPress 哪个好?哪个适合建站?
- 5如何解决Discuz的密码错误次数过多请15分钟后登陆的问题
- 6帝国cms灵动标签取得内容和栏目链接地址
- 7emlog pro 注册码“开心”教程(如果有一天,emlog官方版 或者 emlog免费版 跑路了,那用户怎么办?)
- 8织梦CMS在nginx下设置伪静态方法(附nginx伪静态规则)
- 9帝国cms后台登录出现”您还未登录”怎么解决?
- 10帝国cms7.5忘记登录密码 和忘记登录认证码以及多次登录 失败被锁定解决办法