网站页面使用CSS字体图标教程之FontAwesome

2019-08-2600:22:25 发表评论 423
摘要

FontAwesome提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果,而且FA图标的使用方法非常简单。

基本操作

Font Awesome字体图标的使用方法非常简单:

1、首先要引入Font Awesome的css样式:<link rel="stylesheet" href="css/font-awesome.min.css">

2、在你想放置图标的地方添加<i>标签(或使用<span>标签),并给<i>添加你想要的图标的class,如下所示:

<i class="fa fa-camera-retro"></i> 注意:第一个fa是必须的。

3、如果在图标后你想添加文字,最好在<i>标签后添加一个空格。

Font Awesome

图标尺寸

fa-lg fa-2x fa-3x fa-4x fa-5x

要相对于字体图标的容器增加它们的尺寸,可以使用class fa-lg(增加33%),fa-2xfa-3xfa-4xfa-5x

<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

如果你使用大图标时字体图标的上面或下面看不见了,请检查是否指定了足够的行高。

固定宽度的图标

使用fa-fw可以将图标设置为固定宽度。这在不同宽度的图标要进行对齐时十分有用。特别是在制作导航列表和列表组是特别有用。

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>  Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>  Library</a><a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>  Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>  Settings</a>
</div>

作为列表图标使用

  • List icons
  • can be used
  • as bullets
  • in lists

使用class fa-ulfa-li可以很容易的将无需列表的图标转换为字体图标。

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-circle "></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

边框和浮动


...Birds born in a cage think flying is an illness.

使用class fa-borderfa-pull-rightfa-pull-left可以很容易的制作出文章的引用图标。

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
...Birds born in a cage think flying is an illness.

图标动画

 

使用class fa-spin可以使任何图标执行旋转动画,使用class fa-pulse可以使图标以8步为周期进行旋转。可以完美执行旋转动画的图标有:fa-spinnerfa-refreshfa-cog

<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-spinner fa-pulse"></i>

某些平台和某些浏览器上执行图标动画会发生不正常的晃动。CSS3动画不支持IE8-IE9浏览器。

旋转和翻转

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical

要任意旋转和翻转图标,可以使用class fa-rotate-*fa-flip-*

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical

CDN加速调用

你可以使用下面的CDN加速地址来加载Font awesome字体图标:

5.10.0版本的CDN加速地址:

  • bootcdn:https://cdn.bootcss.com/font-awesome/5.10.0-12/css/fontawesome.min.css

4.7.0版本的CDN加速地址:

  • bootcdn:https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css

4.4.0版本的CDN加速地址:

  • maxcdn:https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
  • cdnjs:https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css

官方网站及下载

FontAwesome官方网站:http://fontawesome.com/

官方下载地址:https://fontawesome.com/download

GitHub下载地址:https://github.com/FortAwesome/Font-Awesome

本地文件包下载

FontAwesome4.7.0版本网站站长版+5.10.2版本web+desktop版本压缩包

4.7网站站长版:调用简单,将css文件和字体文件放在同一文件夹,在HTML的 <head> 中引用font-awesome.min.css就OK了。

5.1web版:包括网页字体所需CSS、SVG、JS、SVG文件。

5.1desktop版:包括桌面系统可安装和使用的SVG和OTF字体。

关注站长公众号:狩酷乐享,公众号内回复:FA图标

狩酷乐享

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: