1、一句话将Font Awesome加入您的网页中。您完全不用下载或者安装任何东西!
2、将以下代码粘贴到网页HTML代码的 <head>
部分。
"//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
>3、参考示例,然后开始使用Font Awesome吧!
1、复制整个font-awesome
文件夹到您的项目中。
2、在HTML的 <head>
中引用font-awesome.min.css。
"path/to/font-awesome/css/font-awesome.min.css"
rel="stylesheet"
>3、参考示例,然后开始使用Font Awesome吧!
<i>
,因为它更简洁。 但实际上使用 <span>
才能更加语义化。
"fa fa-camera-retro"
></i> fa-camera-retro
fa-fw
可以将图标设置为一个固定宽度。主要用于不同宽度图标无法对齐的情况。 尤其在列表或导航时起到重要作用。
"fa fa-home fa-fw"
></i> fa-home
"fa fa-book fa-fw"
></i> fa-book
"fa fa-pencil fa-fw"
></i> fa-pencil
"fa fa-cog fa-fw"
></i> fa-cog
fa-spin
类来使任意图标旋转,现在您还可以使用 fa-pulse
来使其进行8方位旋转。尤其适合 fa-spinner
、fa-refresh
和 fa-cog
。
"fa fa-spinner fa-spin"
></i> fa-spinner
"fa fa-circle-o-notch fa-spin"
></i> fa-circle-o-notch
"fa fa-refresh fa-spin"
></i> fa-refresh
"fa fa-cog fa-spin"
></i> fa-cog
"fa fa-spinner fa-pulse"
></i> fa-spinner
fa-stack
类作为父容器, fa-stack-1x
作为正常比例的图标, fa-stack-2x
作为大一些的图标。还可以使用css样式切换图标颜色。您可以在父容器中通过添加大图标类来控制整体大小。
"fa-stack fa-lg"
>"fa fa-square-o fa-stack-2x"
></i> "fa fa-twitter fa-stack-1x"
></i> "fa-stack fa-lg"
>"fa fa-camera fa-stack-2x"
></i> "fa fa-ban fa-stack-1x"
style="color:#a94442;"
></i>