扫码一下
查看教程更方便
教程 > bootstrap 5 教程 >
阅读：2180
bootstrap5 如何使用字体图标——迹忆客-ag捕鱼王app官网
bootstrap5 现在包括 ，这些图标为 svg、svg sprite 或 web 字体格式。
使用字体图标的好处是，可以通过应用 css color 属性来创建任何颜色的图标。 此外，要更改图标的大小，只需使用 css font-size 属性即可。
现在，让我们看看如何在网页上包含和使用 bootstrap5 字体图标。
在网页中包含 bootstrap5 图标
在网页中包含 bootstrap5 图标的最简单方法是使用 cdn 链接。 此 cdn 链接基本上指向一个远程 css 文件，其中包含生成字体图标所需的所有类。
我们可以在 bootstrap 模板以及简单的网页中包含 bootstrap5 图标，而无需使用 bootstrap 框架。 让我们看看下面的例子：
在html中包含bootstrap5 图标 - 迹忆客(jiyik.com)
如何在代码中使用 bootstrap5 图标
要在代码中使用 bootstrap5 图标，我们需要在代码中加一个 标记，其中应用了单独的图标类 .bi-*。 使用 bootstrap5 图标的一般语法如下：
其中 class-name 是特定图标类的名称，例如 search, person, calendar, star, globe, facebook, twitter等。 查看所有 。
例如，要将搜索图标放在按钮内，可以执行以下操作：
上面示例的输出如下所示：
同样，可以将图标放置在导航、表单、表格、段落或任何我们想要的地方。 在下一章中，我们将看到如何在 bootstrap5 导航组件中使用这些图标。
注意：记得在图标元素的结束标签后（即标签后）留一个空格，当图标与文本字符串如内部按钮或导航链接一起使用时，以确保图标和文字之间有适当的间距 。
在 bootstrap 中使用 font awesome 图标
我们还可以在 bootstrap5 中使用外部图标库。 bootstrap5 最流行和高度兼容的外部图标库之一是 font awesome。 它提供了超过 675 个图标，这些图标为 svg、png 以及 web 字体格式，来提高可用性和可扩展性。
可以简单地使用免费提供的 font-awesome cdn 链接将其包含在我们的项目中。 让我们看看下面的示例来了解它的基本工作原理：
在bootstrap5中包含 font awesome 图标 - 迹忆客(jiyik.com)
如何在代码中使用 font awesome 图标
要在代码中使用 font awesome 图标，我们需要在代码中添加一个 标签以及一个基类 .fa 和一个单独的图标类 .fa-*。 使用 font-awesome 图标的一般语法是：
其中 class-name 是特定图标类的名称，例如 search, person, calendar, star, globe, facebook, twitter等。 查看所有 。
例如，要将搜索图标放在按钮内，可以执行以下操作：
上面示例的输出如下所示：
