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