何时使用
字体Awesome是一个商业图标服务，允许我们在我们的页面上使用可伸缩的矢量图标。基本上，这意味着我们可以在页面上添加图标，它们在任何尺寸和任何设备上都很好看。这些图标可以增强用户体验和网站的视觉吸引力。
字体很棒的集合包括许多类型的图标。你可能想试试:
- 形状/工件:书
- UX元素:外部链接
- 标识:Facebook
我们在下面的例子中使用book图标。
基本用法:
[fa type="solid" icon="book"]
- 在Font Awesome数据库中查找图标的名称，方法是:http://fontawesome.com/v6.0/icons/
- 搜索并点击你想要的图标。你会看到所选图标的名称在上面，例如:
地址簿 - 选择你想要使用的图标类型，选项是固体，常规，轻，双色，薄，和品牌。
- 将您的缩短代码添加到短代码公式中:[fa type="solid" icon="地址簿"]
类型的选择
- Solid: [fa type=" Solid " icon="通讯录"]
- Regular: [fa type=" Regular " icon="通讯录"]
- 灯光:[fa type="灯光" icon="通讯录"]
- 多音:[fa type="多音" icon="通讯录"]
- Thin: [fa type=" Thin " icon="通讯录"]
- 品牌:[fa type=" Brands " icon="tiktok"]
可选属性:颜色、大小、堆叠
默认情况下，图标将继承相邻文本的文本样式。通常，你会希望图标突出。幸运的是，Web Team专家已经将其中一些特性作为可选属性添加到短代码中。
颜色
的颜色属性更改图标的颜色。目前，我们支持三种颜色。这里有一些书中的例子：
- 蓝色的书:[fa type="solid" icon="book" color="blue"]
- 绿色的书:[fa type="solid" icon="book" color="green"]
- 橙色的书:[fa type="solid" icon="book" color="orange"]
使用示例:在IAS侧栏上的社交媒体图标
大小
size属性更改图标的大小。我们使用从2到10的size属性支持默认大小和9。
- 默认[fa type="solid" icon="book"]
- Size 2: [fa type="solid" icon="book" Size ="2"]
- Size 3: [fa type="solid" icon="book" Size ="3"]
- 尺寸4:[fa type="solid" icon="book" Size ="4"]
使用示例:在IAS侧栏上的社交媒体图标
堆放
的堆放属性使您可以通过将图标居中于圆形或正方形来进一步增强图标。这可以与颜色而且大小属性有很大的影响。
- 圆圈中的书:[fa type="solid" icon=" Book " stacked="circle"]
- 方形书:[fa type="solid" icon=" Book " stacked="square"]
- 绿色方块中更大的书:[fa type="solid" icon="book" stacked="square" size="2" color="green"]
使用示例:供参考主页
在链接中使用很棒的图标
开发人员通常使用字体Awesome图标来确定超链接的目的。例如，有时他们会在电子邮件地址之前放一个信封，或者在外部链接之后放一个外部链接符号。由于图标继承了链接样式，可以通过将图标包装在锚标记中来实现整洁的效果。考虑以下外部链接的例子:
锚元素外的图标:
代码:谷歌 [fa type="solid" icon="external-link"]
呈现:谷歌
锚元素内的图标:
Code: 谷歌[fa type="solid" icon="external-link"] . > . Code: 谷歌[fa type="solid" icon="external-link"
呈现:谷歌
使用示例:欧洲研究收藏和服务