• 欢迎访问毫厘博客,博客上的所有软件及相关资料均为软件商和个人工作总结或网友推荐及网络收集整理而来、仅供学习和研究使用、切勿用做商业用途、如有侵犯版权者、请来信到邮箱 :www_ihli_xyz@163.com 指出、毫厘博客将立即修正、净化网络版权环境、同时毫厘博客也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。

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

wordpress教程 hauyf 9个月前 (05-28) 339次浏览 已收录 0个评论 扫描二维码

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

下载

本地下载
毫厘博客, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:「wordpress教程」wordpress中使用Font Awesome图标的方法
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

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