Iconfont

WP网站导航菜单图标添加方法_iconfont_Font Awesome

你一定看到过别人的网站导航菜单带有图标(如果你不知道怎么自己建网站,那么可以回到奶爸建站笔记首页看一看导航。),例如首页有一个房子图标,购买按钮前面有一个购物车图标,设置按钮前面有齿轮图标等等。就像下图演示的这种。

图标字体

那么是怎么实现这种图标效果的呢?

其实这只是引入了一种图标字体而以,本文就教大家如何给WordPress或者其他网站程序的菜单或者任何位置添加图标的方法

图标字体介绍

图标字体,从字面意义上可以理解成它本身是一种字体文件,只不过都是图标的字体。在一些手机APP或者网页设计的时候通常会碰到图标的使用,最早的网页设计都是做图标图片文件,但是由于不同的分辨率,会导致图标模糊不清,所以后面开始有了使用图标字体代替图标图片的应用。

图标字体有很多种,有收费的,也有免费的,本文介绍两款应用的比较多的图标字体:iconfont和Font Awesome

iconfont图标字体使用方法

Iconfont是阿里巴巴打造的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。功能强大,图标丰富,而且是国内的平台,网速快。

访问iconfont

Iconfont使用步骤:

  1. 访问网站,右上角登录。
  2. 挑选你喜欢的图标,点击购物车按钮收藏入库。
  3. 右上角购物车按钮,添加至项目。
  4. 创建一个项目名,并确定。
  5. 复制代码,添加到网站css文件中。
  6. 前台使用li标签引用图标。

Iconfont具体使用方法:

挑选你想要的图标,添加到购物车。iconfont图标字体使用教程

挑选完毕后,网页右上角购物车,点击后添加到项目。

iconfont图标字体使用教程

创建一个项目,后期想增加图标还可以直接添加到项目里面。

iconfont图标字体使用教程

确定后出现代码,复制所有的代码,添加到你WordPress主题的css文件里面。如果你不会添加,也可以添加到主题自定义的自定义css代码框里面。

iconfont图标字体使用教程

然后把下面的css代码同样添加进去,定义class的。

/* 定义class */
.iconfont{
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}

接着回到你想要显示图标的地方,例如菜单,在导航标签这里添加i标签就可以调用图标了。

<i class="iconfont">图标代码</i>

iconfont图标字体使用教程

奶爸提示:

你也可以添加Font class内容到你主题的页面header.php文件里面,和上面添加的方法二选一即可。代码如下:

<link rel='stylesheet' href='你的iconfont Font class代码' type='text/css' media='all' />

 

 

Font Awesome图标字体使用方法

Font Awesome有好几个网站,这里以http://fontawesome.dashgame.com/为例,使用方法如下:

在你主题的header.php(其他网站就在网页头部代码)里面添加下面这串代码:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

然后同样使用i标签调用图标就行了。

<i class="fa fa-camera-retro"></i> fa-camera-retro

更多使用方法可以参见官网

WordPress插件方式

如果你对添加网页代码不熟悉,那么也可以直接使用WordPress插件的方法来实现,只要你服务器性能好,别怕插件装的多。

Font Awesome插件

例如安装Font Awesome

下载地址

安装启用后,在设置里面可以设置显示方式,以webfont方式显示还是以svg图标显示。

使用的时候同样使用i标签调用:

<i class="fas fa-stroopwafel"></i>

另外插件还支持短码调用:

[icon name="stroopwafel"]

更多图标字体

图标字体除了本文推荐的iconfont和Font Awesome外,还有很多可用的,你可以根据自己需要选择。

fontello

http://fontello.com/

在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。

icomoon

http://icomoon.io/app/#/select

可以在线导入的SVG格式字体,并进行编辑,然后下载来使用。很酷吧!

Glyphicon Halflings

http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Dashicons图标字体

https://blog.naibabiji.com/skill/wordpress-user-dashicons.html

WordPress后台自带字体,可以直接使用。

上面就是wp博客如何给菜单添加fontawesome图标的所有内容,赶紧去给你网站菜单添加图标吧。

 

5/5 - (1 vote)
滚动至顶部