Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外,还有社交网络图标、Web 应用程序图标和编辑器图标等等,可以免费用于商业项目。

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

The WordPress Toolbox
Unlimited Downloads: 500,000+ WordPress Themes, Plugins, Templates & Design Assets

如何在wordpress主题中使用Font Awesome小图标

DOWNLOAD NOW

如何在wordpress主题中使用Font Awesome小图标

Font Awesome使用相当广泛,而Wordpress同样使用广泛。怎么把两者结合起来来实现漂亮的小图标呢。下面我们来看看相应的教程。

Font Awesome 特性

  1. 一个字体文件, 369 个图标。
  2. 不需要javascript要求:更快的载入速度
  3. 无限的可扩展性:可伸缩矢量图形意味着每一个图标在任何大小看起来真棒。
  4. 自由免费:你可以将它应用到你的商业中。
  5. CSS控制:轻松的定义图标的颜色,大小,阴影,和任何与CSS相关的特性。
  6. 完美的视网膜显示:使用矢量字体,这意味着他们可以完美的显示在高分辨率显示器中
  7. 为BootStrap而生:完全的兼容BootStrap新版3.0
  8. 桌面友好:你可以查看字体的样式列表
  9. 兼容屏幕阅读器:不像其他字体图标不兼容屏幕阅读器

Font Awesome的使用

1、下载Font Awesome,目前最新版的是4.4.0版本。把下载这来的字体上传到你的主题目录下面,把相应的font和css分别放在主题下面的font和css目录下。

2、打开你主题的functions.php文件,在合适的位置插入下面的代码,作为font awesome的css引用。

//enqueues our locally supplied font awesome stylesheet
function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

当然你也可以使用官方的cdn分发地址。具体代码如下:

//enqueues our external font awesome stylesheet
function enqueue_our_required_stylesheets(){
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); 
}
add_action('wp_enqueue_scripts','enqueue_our_required_stylesheets');

3、一般使用

(1)使用方法是css中调用,通常使用:before:after来实现,样式定义的内容通过content and font-family实现。下面是一个例子:


Settings Menu

但如何获取图标的实际content编码呢。打开网站Font Awesome,现在任意你喜欢的图标,点击详情。得带下面的页面,箭头所指的就是图标的content代码。

如何在wordpress主题中使用Font Awesome小图标

(2)嵌入式html代码。

这个相对简单,在你需要添加的地方加入下面的代码即可


/*Base styles for a drop down*/.nav-list .nav-item{
display: block;
}
.nav-item .nav-link:first-child{
border-top: solid 1px #ccc;
}
.nav-item .nav-link{
display: block;
padding: 8px 12px;
background: #eee;
border: solid 1px #ccc;
border-top: 0px;
color: #333;
}
.nav-link > i {
margin-right: 10px;
}

就这么简单。希望对你使用Font Awesome有所帮助。

发表回复