如何在WordPress主题中使用Font Awesome
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在WordPress主题中使用Font Awesome相关的知识,希望对你有一定的参考价值。
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来添加,例如
<i class="icon-camera-retro"></i>
当然,也可以将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里写的就是字体文件路径,根据自己的实际情况修改之。之后将其压缩,就可以用了。
(转载) 参考技术A 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. 大功告成,下面就是使用了!
如何使用 zee 样式主题更改 Wordpress 标题中的字体
【中文标题】如何使用 zee 样式主题更改 Wordpress 标题中的字体【英文标题】:How to change font in Wordpress header with zee style theme 【发布时间】:2012-11-04 05:36:57 【问题描述】:我被困住了,我创建了一个带有 zee 风格主题的 WordPress 网站。我还应用了一个名为“FONT”的插件来编辑样式表并应用自定义字体。一切正常,我的字体已上传到我用来更改标题的http://fontsforweb.com 服务。 更新 WordPress 和 zee 风格主题后,我所有的工作都消失了,我不能再使用那种字体了。 http://fontsforweb.com 试图帮助我,他们进行了几次更新,但没有积极的结果。因此,我删除了该插件,并尝试通过将字体转换为 woff 格式并使用下面的代码自行完成,但仍然无法正常工作。恐怕我将不得不重做整个网站。请帮助我避免这种情况。
更新:我玩过其他主题,问题完全一样。在我看来,是 WordPress 自己造成了这个问题。
#logo h1
font-size: 2.5em;
color: #fff;
font-family: "jadem___";
src: url('jadem___.woff');
【问题讨论】:
【参考方案1】:我认为正确的方法是创建一个子主题并从那里编辑您的样式表。这篇文章解释得比我还好Tutorial
这将使您的主题经得起未来的考验,并防止它在您更新时发生变化。
此外,无需插件即可轻松更改字体。再次someone else can explain this better than I can
这可能看起来像是一个狡猾的答案,但我认为如果您检查这些链接,它会很有意义。这是处理这个长期问题的正确方法,而且比看起来更容易。希望这会有所帮助。
【讨论】:
【参考方案2】:“字体”插件现在使用 WOFF 文件格式,请重试。
【讨论】:
以上是关于如何在WordPress主题中使用Font Awesome的主要内容,如果未能解决你的问题,请参考以下文章