推荐一套绝佳Font Awesome图标

推荐一套绝佳Font Awesome图标
Font Awesome 是一种矢量图标,或者叫图标字体,矢量的好处是无限缩放不会失真,可以适应各种尺寸的屏幕,省掉了做很多图片的麻烦。如果你想在自己的 WordPress 主题中使用 Font Awesome,下面介绍了方法。
Wordpress教程 腾讯云SMTP发送邮件失败的解决方法 腾讯云SMTP发送邮件失败的解决方法 [v_act]WordPress经常会用到发送邮件的功能,比如评论回复通知、审核通过通知等,我们可以用SMTP来发送邮件。搬家到腾讯云后发现SMTP发送邮件失败,一边百度一边摸索,中间还有一些奇葩坑,但是好在问题解决了,下面说说具体的问题解决方法,当然这种情况也不单单局限于腾讯云,阿里云等等服务器,邮箱也不仅仅是163邮箱。[/v_act] 检查SMTP设置... 时间:2018/10/27 人气:1309 评论:0 阅读全文

安装插件 Font Awesome Icons

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

1、将 Font Awesome 的 css 和字体文件集成到 WordPress
2、提供调用图标的 shortcode
第一个是必须的,而第二个绝对是锦上添花的功能。

使用代码集成

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

1. 下载 Font Awesome,将 font-asesome 文件夹直接解压到你主题的根目录下
2. 打开主题的 functions.php,添加如下代码

//集成 Font Awesome MC百科网:www.mcbke,com
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 来添加,例如

我是一个小喇叭

[demo] 我是一个小喇叭[/demo]
当然,也可以将 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里写的就是字体文件路径,根据自己的实际情况修改之。之后将其压缩,就可以用了。

相关下载

插件下载 FontAwesome 官网

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

MC百科 字体素材 推荐一套绝佳Font Awesome图标 https://www.mcbke.com/fontawesome.html

科技迷、外设控、Minecraft爱好者,科技改变生活!

上一篇:

已经没有上一篇了!

常见问题

相关文章

猜你喜欢
评论
1 条评论
无名
2018-10-29 上午8:23 回复

学习了

推荐一套绝佳Font Awesome图标-海报

分享本文封面