相关图标矢量字库:《Font Awesome:图标字体》、《阿里巴巴矢量图标库:Iconfont》
Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter、facebook等等。用户可以自定义这些图标字体,包括大小、颜色、阴影效果以及其它可以通过CSS控制的属性。它有以下的优点:
- 1、像矢量图形一样,可以无限放大
- 2、只需一种字体,同时拥有多个图标,目前支持439个图标
- 3、无需考虑兼容性问题,fontawesome不依赖于javascript
- 4、通过CSS可以任意控制所有图标的大小 ,颜色,阴影。
- 5、由于fontawesome是矢量字体,可以完全兼容视网膜屏
- 6、能和Bootstrap等常用UI框架一起使用,良好兼容性
- 7、可以用于桌面应用中
- 8、不像其它字体那样, 它可以兼容屏幕阅读器。
它的缺点是:
- 1、对IE6等浏览器兼容性不是很好,不过最新版本的Font Awesome和IE7完美兼容
- 2、要想用fontawesome,需要引入相关的字体文件,增加了网页大小
在HTML中使用Font Awesome也很简单,如下:
.fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } #这里显示的是Google plus和twitter的图标 <i class="fa fa-google-plus-square"></i> \f0d4 <i class="fa fa-twitter"></i> \f081 #这里显示两个图标合并的样式 <span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x"></i> </span>
下面是全部的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"
原创文章版权归过往记忆大数据(过往记忆)所有,未经许可不得转载。
本文链接: 【Font Awesome:图标字体,完全CSS控制】(https://www.iteblog.com/archives/1099.html)