Font Awesome 的使用

加入文件

1.最简单的方式:CDN (由BootCDN提供)

一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西!

将以下代码粘贴到网页HTML代码的  部分.

2.下载文件,使用默认CSS

如果您使用了默认的Bootstrap CSS样式,那么你可以使用这种方式来引入默认的Font Awesome CSS样式。

 复制整个 font-awesome 文件夹到您的项目中。

在HTML的  中引用font-awesome.min.css

3.icon使用方法 

基本图标

您可以将Font Awesome图标使用在几乎任何地方,只需要使用CSS前缀 fa ,再加上图标名称。 Font Awesome是为使用内联元素而设计的。我们通常更喜欢使用  ,因为它更简洁。 但实际上使用  才能更加语义化。

 fa-camera-retro

大图标

使用 fa-lg (33%递增)、fa-2x、 fa-3xfa-4x,或者 fa-5x 类 来放大图标。

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

固定宽度

使用 fa-fw 可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。


    Home
    Library
    Applications
    Settings

用于列表

使用 fa-ul 和 fa-li 便可以简单的将无序列表的默认符号替换掉


  
  • List icons
  •   
  • can be used
  •   
  • as bullets
  •   
  • in lists
  • 你可能感兴趣的:(前端总结,css,html,html5)