WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 在WordPress主题中使用Font Awesome

在WordPress主题中使用Font Awesome

PCDotFan10年前

 

在WordPress主题中使用Font Awesome-WP酷

Font Awesome是一种矢量图标,或者叫图标字体,矢量的好处是无限缩放不会失真,可以适应各种尺寸的屏幕,省掉了做很多图片的麻烦。如果你想在自己的WordPress主题中使用Font Awesome,下面介绍了方法。

 

安装插件Font Awesome Icons

我的博客有很多代码,但今天我要把插件放在前面,不希望大家觉得在WordPress中使用插件就一定会降低性能。相反,我推荐使用插件,插件小巧灵活,即插即用,不想要也可以成本很低的舍弃。只有代码质量较低的插件才会降低网站性能。

Font Awesome Icons就是一个短小精悍的插件,功能只有两个:

  • 将Font Awesome的css和字体文件集成到WordPress
  • 提供调用图标的shortcode

第一个是必须的,而第二个绝对是锦上添花的功能。

 

使用代码集成

如果你要发布自己的主题,向用户提供font awesome作为一个卖点,下面是集成方法。

1. 下载Font Awesome,将font-asesome文件夹直接解压到你主题的根目录下

2. 打开主题的functions.php,添加如下代码

add_action( 'wp_enqueue_scripts', 'load_fontawesome_styles' );
function load_fontawesome_styles(){
global $wp_styles;
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/font-awesome/css/font-awesome.min.css' );
wp_enqueue_style( 'font-awesome-ie7', get_template_directory_uri() . '/font-awesome/css/font-awesome-ie7.min.css' );
$wp_styles->add_data( 'font-awesome-ie7', 'conditional', 'lte IE 7' );
}

这段代码会引入font awesome主要的css文件,还会条件化加载修复ie7的css样式。

3. 大功告成,下面就是使用了,使用的方式很多,官方推荐的方法是用i标签加class来添加,例如

当然,也可以将class应用到其它标签,就像使用字体一样,可以设定字号、颜色、阴影等属性。

具体使用方法可以看官方文档。

 

其它说明

需要注意的是font-awesome的css文件和字体文件要保持对应关系,如果你更改了字体目录名称或者位置,不要忘记修改css文件。

具体说是修改font-awesome.css这个没压缩的文件,打开文件看开头的几行样式

@font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.1.0');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
font-weight: normal;
font-style: normal;
}

url里写的就是字体文件路径,根据自己的实际情况修改之。之后将其压缩,就可以用了。

#bootstrap#Font Awesome#矢量图标
5
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (2)
再想想
  • 梦月酱

    没事钻研更健康么

    10年前
    • WP酷

      @梦月酱 无折腾不铁血……

      10年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
WordPress 在中英文间加入空格 实现中英文自动排版
7年前
为WP主题添加"网页加载中"特效
10年前
AMP – 为 WordPress 移动站点操作全球访问优化
6年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1