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>