php更改导航栏图标,wordpress导航菜单前添加矢量小图标

wordpress导航菜单前的 Icon矢量图标看着很舒服，于是就研究了一下。网上的方法有很多像插件，大多收费并影响服务器，所以不推荐;还有就是在标题前加img标签，好丑的样子，不推荐。最后，一种是最简单，最方便的实现方法，推荐大家试试。

这个功能3.0就已经有了，就是CSS类。不过CSS并不能更方便用户去修改或添加更多的 Icon 字体，这里介绍的是，用标题属性来替代CSS类来添加 Icon 字体，这个功能已经添加到wpdx里，其他的主题需要先在head引用 FontAwesome 字体。

Font Awesome介绍

Font Awesome是一款很流行的字体图标工具。随着Bootstrap的流行而逐渐被人所认识，现在FontAwesome不仅仅可以在bt上使用，还可以应用在各种web前端开发中。相对于传统的使用背景图片作为图标，字体图标主要是支持自适应、可以使用字体的各种特性(比如变色、变大变小、字体阴影等)、减少数据加载、样式更容易定义等。

Font Awesome 特性

一个字体文件， 369 个图标。

不需要JavaScript要求：更快的载入速度

无限的可扩展性：可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。

自由免费：你可以将它应用到你的商业中。

CSS控制：轻松的定义图标的颜色，大小，阴影，和任何与CSS相关的特性。

完美的视网膜显示：使用矢量字体，这意味着他们可以完美的显示在高分辨率显示器中

为BootStrap而生：完全的兼容BootStrap新版3.0

桌面友好：你可以查看字体的样式列表

兼容屏幕阅读器：不像其他字体图标不兼容屏幕阅读器

Font Awesome的使用

你只需要到：http://fontawesome.io 下载压缩包然后解压到你的项目中。

在你的HTML头部的head里面添加对相应的font-awesome的样式。

如需兼容IE浏览器，可以使用Font-awesome的3.2.1版本。下载font-awesome-ie7.css或者是font-awesome-ie7.min.css。然后在项目中引入该样式文件。

/font-awesome/css/font-awesome.min.css?ver=4.0.1' type='text/css' media='all' />

然后在wordpress后台-菜单编辑中设置某个菜单比如首页的导航标签属性为：

首页

现在一般的主题都已经引用了Font Awesome，你不妨直接尝试最后一步，看是否能成功加载图标，这样能省去你的许多时间

原创文章，作者：卓弘，如若转载，请注明出处：https://www.jiaidc.com/175.html

php更改导航栏图标,wordpress导航菜单前添加矢量小图标相关推荐

微信小程序自定义导航栏（带汉堡包菜单）
微信小程序自定义导航栏(带汉堡包菜单) 1.在app.json中 window配置navigationStyle (如果单独页面使用,可在页面的json文件配置) 2.计算相关值整个导航栏的高度: ...
vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
word文档导航栏中的同级菜单不对齐
在编辑word文档时,会出现导航栏中的同级菜单不对齐情况,解决办法如下: 保存已编辑的文档内容,然后关闭word,重启word,即可解决
鼠标悬浮导航栏显示下拉菜单
在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法,html和css样式就不贴代码了. 1.原生js <script>// window.onload = function(){// 获取需要 ...
【HTML+CSS】实现网页的导航栏和下拉菜单
熟练的使用导航栏,对于任何网站都非常重要,我们可以使用CSS转换为好看的导航栏而不是枯燥的HTML菜单.同时,我们使用 CSS 可以创建一个鼠标移动上去后显示下拉菜单的效果. 水平导航栏: 垂直导航栏 ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
Android中导航栏之自定义导航布局
Toolbar系列文章导航 Android中导航栏之Toolbar的使用 Android中导航栏之溢出菜单OverflowMenu Android中导航栏之搜索框SearchView Android中 ...
React Native 的顶部导航栏和底部导航栏目
说来也是惭愧,本来关于底部导航栏,我已经写过一篇博客,只不过那篇更偏向于入门一些,当时一实现功能之后就迫不及待的分享给大家了.地址在这儿:http://blog.csdn.net/LJFPHP/art ...
Axure中如何快速设计左边导航栏，侧导航栏和顶部导航栏等？
Axure中如何快速设计侧导航栏和顶部导航栏? 1.下载侧导航栏和顶部导航栏组件参考<蚂蚁金服 ant design 中下载axure 菜单组件库> 2.导入组件下载保存为AntDes ...

php更改导航栏图标,wordpress导航菜单前添加矢量小图标

php更改导航栏图标,wordpress导航菜单前添加矢量小图标相关推荐

最新文章

热门文章