欢迎访问本站!
胜败皆在毫厘之间。

「wordpress教程」wordpress中使用Font Awesome图标的方法

Font Awesome提供可缩放的矢量图标也叫图标字体,矢量图标的好处就是无论怎么缩放也不会失真,可以适应您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

特点

  • 一个字库,675个图标
    仅一个Font Awesome字库,就包含了与网页相关的所有形象图标。
  • 无需依赖JavaScript
    Font Awesome完全不依赖JavaScript,因此无需担心兼容性。
  • 无限缩放
    无论在任何尺寸下,可缩放的矢量图形都会为您呈现出完美的图标。
  • 免费
    Font Awesome完全免费
  • CSS
    支持css效果,无论颜色效果、大小、阴影都可以简单实现
  • 适应屏幕
    Font Awesome不会对屏幕有任何影响

安装方法

方式1:BootstrapCDN (由MaxCDN提供)
将以下代码粘贴到网页HTML代码的 <head> 部分.

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

方式2:复制整个 font-awesome 文件夹到主题文件夹中。(文件在文章结尾下载)
在HTML的 中引用font-awesome.min.css

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

使用演示

fa-camera-retro

fa-lg (33%递增)

fa-2x

fa-3x

fa-4x

fa-5x

使用方法

如果需要换别的图标形状,要更换代码里对应的因为例如:
home <i class=”fa fa-home”></i>

<i class="fa fa-camera-retro"></i> fa-camera-retro
<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

下载

如果对您产生了帮助,我深感荣幸、感谢对本博客的支持。
毫厘博客, 版权所有丨如未注明 , 均为原创丨转载请注明原文链接:「wordpress教程」wordpress中使用Font Awesome图标的方法

赞(0) 打赏
未经允许不得转载:毫厘博客 » 「wordpress教程」wordpress中使用Font Awesome图标的方法
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址