Font Awesome图标应用 简单实例教程

Font Awesome图标应用 简单实例教程 应上一篇文章Font Awesome 4.5图标 一款风靡全球的图标字体库和CSS框架 里面说的这篇文章就讲讲Font Awesome图标的实际运用起来会是怎么样子的 我懂的也不多 有说的不好的地方 多多包涵!好了废话不多说我们开始吧!最后我会把这这词教程的文件放到文章最后面提供下载 你们可以去看看!

我这一次是在本地测试 首先我们去下载我们的Font Awesome图标的文件 百度云下载地址:http://pan.baidu.com/s/1c2g9EH6  

下载好了 解压了会是这样的:

QQ截图20160414133136

里面的所以东西的所以然我也说不出 不过重要的就是css和那个fonts 就这两个 css不用解释了吧!fonts这个里面放的是一些字体什么什么的 反正它们是必须的就对了  剩下的那些是协议什么的 不太清楚反正不要也是可以的

好了所以最终就是这样的:

QQ截图20160414133653

那个index.html是我刚才新建的

好了 现在我们来调用:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>

</body>
</html>

本来我是想这截图的 后来一想还不如直接发代码的好  上面就是一个简单的html 有头部 head 有主体body 然后我们调用了 css文件夹里面的连个css 文件font-awesome.min.css和font-awesome.min.css  好了接下来就是从css里面调用出来我们的Font Awesome图标了 我们来调用一个妹子图标  female 就是妹子图标的代码不懂的可以去上篇文章里面去找Font Awesome 4.5图标 一款风靡全球的图标字体库和CSS框架 里面有Font Awesome所有图标的样子和代码  好了知道了调用什么图标了 然后我们就开始写:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<i class="fa fa-female"></i>
</body>
</html>

好了我们来看 我们的浏览器里面显示的是什么:

QQ截图20160414140700

看一个妹子出现了  好了 是不是太小了一点 我们来弄大一点

不过在这之前我们来解释一下这段代码

<i class="fa fa-female"></i>

开始我们说了妹子图标是

female

然而我们这里写的是

fa fa-female

这没有什么好奇怪的 别人css里面就是这样写的fa-female 不过前面为什么要加一个fa 我就不知道了

反正就是在你调用一个图标的时候 你知道了它的一个代码 就在前面加一个fa fa-然后再写咋i标签的class里面就可以了

好了 这就是简单的一个Font Awesome图标的调用 现在我们来把妹子变大吧!

QQ截图20160414142002

看是不是大了很多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<i class="fa fa-female"></i>
<i class="fa fa-female fa-lg"></i>
<i class="fa fa-female fa-2x"></i>
<i class="fa fa-female fa-3x"></i>
<i class="fa fa-female fa-4x"></i>
<i class="fa fa-female fa-5x"></i>
</body>
</html>

我们来看看代码 其实没有什么改变就是多了一个fa-lg 和fa-2x到5x 我刚才测试了最多就是5x 所以最大就是那么大了 如果还有什么其它变大的方法除外 fa-lg是放大30%  fa-2x到5x 这个是单位吧 我也不太清楚反正就是放大的东西

其实我们可以更改很多东西的用style控制 可以就可以更改:(比如说最简单的颜色)

QQ截图20160414144821

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
</head>
<body>
<i style="color:#ffb5b5" class="fa fa-female"></i>
<i style="color:#ff9696" class="fa fa-female fa-2x"></i>
<i style="color:#ff6b6b" class="fa fa-female fa-3x"></i>
<i style="color:#fe3b3b" class="fa fa-female fa-4x"></i>
<i style="color:#ff0e0e" class="fa fa-female fa-5x"></i>
</body>
</html>

就这样就可以了  好了今天就说到这里 简单教程 简单的实例呵呵!

它有很多标签是可以弄的不过今天就不说了 你们可以去它的官网去看看!

今天教程的原文件百度云下载:http://pan.baidu.com/s/1byEx7g

Font Awesome 4.5图标 一款风靡全球的图标字体库和CSS框架

Font Awesome 是一款可缩放的矢量图标字库,你可以利用CSS将Font Awesome发挥到极致,包括:大小、颜色、阴影或者其它任何支持的效果。

一个字库,605个图标

好字库,一个就够了。Font Awesome字库包含了与网页相关的所有形象图标。

完全不依赖JavaScript

Font Awesome完全不依赖JavaScript,因此无需担心兼容性。

缩放自如

可根据需示任意缩放,矢量图形都会为你呈现出完美的图标。

好东西真不要钱

Font Awesome完全免费,哪怕是商业用途。请查看许可。

用CSS也能炫酷

只要CSS支持,无论颜色、大小、阴影或者其它任何效果都可以轻松实现。

不同终端完美呈现

Font Awesome的矢量图标,可以在电脑、手机、平板等设备上完美呈现。

完美兼容其它框架

尽管Font Awesome是为Bootstrap而生的,但Font Awesome同样能与其它框架完美兼容。

可用于桌面系统

用于桌面系统,或需要一套完整的矢量图,请查看备忘。

可适配于屏幕阅读器

与其它字体不同,Font Awesome不会影响屏幕阅读器正常工作。

开头我就抄的别人的话了 因为我自己也打不出那么多 毕竟人家是官方嘛! 所以我也不啰嗦了 下面就是最新Font Awesome4.5 版本的图标的分类 和 它们的名称 ! 然后现在肯定有人问了  这个怎么用呢? 其实我刚开始接触也是不知道 不过现在我大致知道是怎么回事了  下篇文章我会来简单的讲解和实例操作一下!

所有标志图标都分别是其所有者的注册商标。
使用这些商标并不代表Font Awesome拥有它们。

Font Awesome:图标字体 完全CSS控制

完全是自己留着以后用 有需要的可以过来看看 !

下面是全部的Font Awesome图标:

  • “\f000”
  • “\f001”
  • “\f002”
  • “\f003”
  • “\f004”
  • “\f005”
  • “\f006”
  • “\f007”
  • “\f008”
  • “\f009”
  • “\f00a”
  • “\f00b”
  • “\f00c”
  • “\f00d”
  • “\f00e”
  • “\f010”
  • “\f011”
  • “\f012”
  • “\f013”
  • “\f014”
  • “\f015”
  • “\f016”
  • “\f017”
  • “\f018”
  • “\f019”
  • “\f01a”
  • “\f01b”
  • “\f01c”
  • “\f01d”
  • “\f01e”
  • “\f021”
  • “\f022”
  • “\f023”
  • “\f024”
  • “\f025”
  • “\f026”
  • “\f027”
  • “\f028”
  • “\f029”
  • “\f02a”
  • “\f02b”
  • “\f02c”
  • “\f02d”
  • “\f02e”
  • “\f02f”
  • “\f030”
  • “\f031”
  • “\f032”
  • “\f033”
  • “\f034”
  • “\f035”
  • “\f036”
  • “\f037”
  • “\f038”
  • “\f039”
  • “\f03a”
  • “\f03b”
  • “\f03c”
  • “\f03d”
  • “\f03e”
  • “\f040”
  • “\f041”
  • “\f042”
  • “\f043”
  • “\f044”
  • “\f045”
  • “\f046”
  • “\f047”
  • “\f048”
  • “\f049”
  • “\f04a”
  • “\f04b”
  • “\f04c”
  • “\f04d”
  • “\f04e”
  • “\f050”
  • “\f051”
  • “\f052”
  • “\f053”
  • “\f054”
  • “\f055”
  • “\f056”
  • “\f057”
  • “\f058”
  • “\f059”
  • “\f05a”
  • “\f05b”
  • “\f05c”
  • “\f05d”
  • “\f05e”
  • “\f060”
  • “\f061”
  • “\f062”
  • “\f063”
  • “\f064”
  • “\f065”
  • “\f066”
  • “\f067”
  • “\f068”
  • “\f069”
  • “\f06a”
  • “\f06b”
  • “\f06c”
  • “\f06d”
  • “\f06e”
  • “\f070”
  • “\f071”
  • “\f072”
  • “\f073”
  • “\f074”
  • “\f075”
  • “\f076”
  • “\f077”
  • “\f078”
  • “\f079”
  • “\f07a”
  • “\f07b”
  • “\f07c”
  • “\f07d”
  • “\f07e”
  • “\f080”
  • “\f081”
  • “\f082”
  • “\f083”
  • “\f084”
  • “\f085”
  • “\f086”
  • “\f087”
  • “\f088”
  • “\f089”
  • “\f08a”
  • “\f08b”
  • “\f08c”
  • “\f08d”
  • “\f08e”
  • “\f090”
  • “\f091”
  • “\f092”
  • “\f093”
  • “\f094”
  • “\f095”
  • “\f096”
  • “\f097”
  • “\f098”
  • “\f099”
  • “\f09a”
  • “\f09b”
  • “\f09c”
  • “\f09d”
  • “\f09e”
  • “\f0a0”
  • “\f0a1”
  • “\f0f3”
  • “\f0a3”
  • “\f0a4”
  • “\f0a5”
  • “\f0a6”
  • “\f0a7”
  • “\f0a8”
  • “\f0a9”
  • “\f0aa”
  • “\f0ab”
  • “\f0ac”
  • “\f0ad”
  • “\f0ae”
  • “\f0b0”
  • “\f0b1”
  • “\f0b2”
  • “\f0c0”
  • “\f0c1”
  • “\f0c2”
  • “\f0c3”
  • “\f0c4”
  • “\f0c5”
  • “\f0c6”
  • “\f0c7”
  • “\f0c8”
  • “\f0c9”
  • “\f0ca”
  • “\f0cb”
  • “\f0cc”
  • “\f0cd”
  • “\f0ce”
  • “\f0d0”
  • “\f0d1”
  • “\f0d2”
  • “\f0d3”
  • “\f0d4”
  • “\f0d5”
  • “\f0d6”
  • “\f0d7”
  • “\f0d8”
  • “\f0d9”
  • “\f0da”
  • “\f0db”
  • “\f0dc”
  • “\f0dd”
  • “\f0de”
  • “\f0e0”
  • “\f0e1”
  • “\f0e2”
  • “\f0e3”
  • “\f0e4”
  • “\f0e5”
  • “\f0e6”
  • “\f0e7”
  • “\f0e8”
  • “\f0e9”
  • “\f0ea”
  • “\f0eb”
  • “\f0ec”
  • “\f0ed”
  • “\f0ee”
  • “\f0f0”
  • “\f0f1”
  • “\f0f2”
  • “\f0a2”
  • “\f0f4”
  • “\f0f5”
  • “\f0f6”
  • “\f0f7”
  • “\f0f8”
  • “\f0f9”
  • “\f0fa”
  • “\f0fb”
  • “\f0fc”
  • “\f0fd”
  • “\f0fe”
  • “\f100”
  • “\f101”
  • “\f102”
  • “\f103”
  • “\f104”
  • “\f105”
  • “\f106”
  • “\f107”
  • “\f108”
  • “\f109”
  • “\f10a”
  • “\f10b”
  • “\f10c”
  • “\f10d”
  • “\f10e”
  • “\f110”
  • “\f111”
  • “\f112”
  • “\f113”
  • “\f114”
  • “\f115”
  • “\f118”
  • “\f119”
  • “\f11a”
  • “\f11b”
  • “\f11c”
  • “\f11d”
  • “\f11e”
  • “\f120”
  • “\f121”
  • “\f122”
  • “\f122”
  • “\f123”
  • “\f124”
  • “\f125”
  • “\f126”
  • “\f127”
  • “\f128”
  • “\f129”
  • “\f12a”
  • “\f12b”
  • “\f12c”
  • “\f12d”
  • “\f12e”
  • “\f130”
  • “\f131”
  • “\f132”
  • “\f133”
  • “\f134”
  • “\f135”
  • “\f136”
  • “\f137”
  • “\f138”
  • “\f139”
  • “\f13a”
  • “\f13b”
  • “\f13c”
  • “\f13d”
  • “\f13e”
  • “\f140”
  • “\f141”
  • “\f142”
  • “\f143”
  • “\f144”
  • “\f145”
  • “\f146”
  • “\f147”
  • “\f148”
  • “\f149”
  • “\f14a”
  • “\f14b”
  • “\f14c”
  • “\f14d”
  • “\f14e”
  • “\f150”
  • “\f151”
  • “\f152”
  • “\f153”
  • “\f154”
  • “\f155”
  • “\f156”
  • “\f157”
  • “\f158”
  • “\f159”
  • “\f15a”
  • “\f15b”
  • “\f15c”
  • “\f15d”
  • “\f15e”
  • “\f160”
  • “\f161”
  • “\f162”
  • “\f163”
  • “\f164”
  • “\f165”
  • “\f166”
  • “\f167”
  • “\f168”
  • “\f169”
  • “\f16a”
  • “\f16b”
  • “\f16c”
  • “\f16d”
  • “\f16e”
  • “\f170”
  • “\f171”
  • “\f172”
  • “\f173”
  • “\f174”
  • “\f175”
  • “\f176”
  • “\f177”
  • “\f178”
  • “\f179”
  • “\f17a”
  • “\f17b”
  • “\f17c”
  • “\f17d”
  • “\f17e”
  • “\f180”
  • “\f181”
  • “\f182”
  • “\f183”
  • “\f184”
  • “\f185”
  • “\f186”
  • “\f187”
  • “\f188”
  • “\f189”
  • “\f18a”
  • “\f18b”
  • “\f18c”
  • “\f18d”
  • “\f18e”
  • “\f190”
  • “\f191”
  • “\f192”
  • “\f193”
  • “\f194”
  • “\f195”
  • “\f196”