100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > php更改导航栏图标 wordpress导航菜单前添加矢量小图标

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

时间:2021-03-12 14:55:34

相关推荐

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,你不妨直接尝试最后一步,看是否能成功加载图标,这样能省去你的许多时间

原创文章,作者:卓弘,如若转载,请注明出处:/175.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。