添加 CSS
- 为 <body> 元素指定 text-align 属性。
- 将显示设置为“inline-block”并指定 <span> 元素的填充。
- 分别为“icon-green”和“icon-red”设置颜色属性。
- 设置“icon-large”的字体大小。
body {
text-align: center;
}
span {
display: inline-block;
padding: 10px 20px;
}
.icon-green {
color: green;
}
.icon-red {
color: red;
}
.icon-large {
font-size: 25px;
}
现在，我们可以看到完整的代码。
为 Bootstrap 图标添加颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<link rel="stylesheet" href="https://bootstrap.min.css">
<style>
body {
text-align: center;
}
span {
display: inline-block;
padding: 10px 20px;
}
.icon-green {
color: green;
}
.icon-red {
color: red;
}
.icon-large {
font-size: 25px;
}
</style>
</head>
<body>
<h1>Example</h1>
<span class="glyphicon glyphicon-heart icon-green"></span>
<span class="glyphicon glyphicon-star icon-large"></span>
<span class="glyphicon glyphicon-th icon-red"></span>
</body>
</html>
在我们的示例中，使用了三个图标。
我们更改了两个图标的颜色和一个图标的字体大小。
使用图标对每个都非常有用，因为它们提供了简单的视觉信息。
但是如果你想改变 Bootstrap 图标的标准颜色怎么办？
幸运的是，CSS 允许我们为它们设置样式。
因此，这可以通过 CSS 颜色属性来完成。
我们还可以更改字体大小。
在此代码中，我们将逐步演示如何执行此操作。
从创建 HTML 开始。
创建 HTML
- 标题使用 <h1> 元素，图标使用 <span> 元素。
- 要导入图标，请在 <head> 部分中使用带有 rel 和 href 属性的 <link> 元素。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<link rel="stylesheet" href="https://bootstrap.min.css">
</head>
<body>
<h1>Example</h1>
<span class="glyphicon glyphicon-heart icon-green"></span>
<span class="glyphicon glyphicon-star icon-large"></span>
<span class="glyphicon glyphicon-th icon-red"></span>
</body>
</html>
日期：2020-06-02 22:14:55 来源：oir作者：oir