布尔玛 | 图标

布尔玛（Bulma）是一套开源的 CSS 框架，旨在帮助用户轻松地创建现代响应式网页设计，同时提供了丰富的样式和组件库，如布局、表单、按钮、导航、表格等等。其中，布尔玛支持多种图标集，包括 Font Awesome、Material Icons、Octicons 和自定义图标。

在布尔玛中使用图标非常简单，只需要使用 icon 类加上相应的图标名称即可。

<i class="icon fa fa-heart"></i>
<i class="icon mdi mdi-heart"></i>
<i class="icon octicon octicon-heart"></i>
<i class="icon my-custom-icon"></i>

其中，fa 表示 Font Awesome 图标集，mdi 表示 Material Icons 图标集，octicon 表示 Octicons 图标集。可以在布尔玛官网的图标文档中找到完整的图标列表，也可以自定义图标。

自定义图标

要使用自定义图标，需要先将图标文件上传到服务器上并使用 @font-face 将图标字体引入到样式表中。例如，my-icons.ttf 图标文件包含了两个图标 my-icon1 和 my-icon2，可以使用如下代码将其引入：

@font-face {
    font-family: 'my-icons';
    src: url('path/to/my-icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

然后，可以使用以下代码将自定义图标添加到页面中：

<i class="icon my-icon1"></i>
<i class="icon my-icon2"></i>

需要注意的是，自定义图标要使用与引入字体时设置的 font-family 相同的名称。

使用场景

布尔玛的图标适用于各种场景，比如在按钮中添加图标、在表格中用图标表示状态、在导航栏中用图标表示页面等等。使用图标可以让页面更加美观、直观，提高用户体验。

总之，布尔玛的图标集既丰富又易用，可以大大提高网页的设计效率和质量，建议开发者们多加尝试。