Bootstrap 3 提供了一套内置的字体图标集,可以用来增强网站的视觉效果。这些字体图标可以通过简单的 CSS 类来使用,无需额外的图片文件,非常方便。
使用 Bootstrap 字体图标
要使用 Bootstrap 字体图标,首先需要在页面中引入 Bootstrap 的 CSS 文件。然后,在 HTML 元素中添加相应的 CSS 类即可显示对应的图标。
下面是一个简单的例子:
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<h1>Bootstrap Icons</h1>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-heart"></span>
<span class="glyphicon glyphicon-user"></span>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>在上面的例子中,我们使用了 glyphicon 类和 glyphicon-图标名称 类来显示不同的图标,例如 glyphicon-star、glyphicon-heart、glyphicon-user 等。
自定义 Bootstrap 字体图标
除了使用 Bootstrap 提供的内置图标外,我们也可以自定义字体图标。有一些在线工具可以帮助我们生成自定义的字体图标,比如 Font Awesome、Iconmoon 等。
首先,我们需要选择想要的图标,然后将图标下载下来或者使用在线工具生成相应的字体文件。接着,我们可以将字体文件引入到项目中,并通过 CSS 类来使用自定义的图标。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Icons</title>
<link rel="stylesheet" href="path/to/custom-icons.css">
</head>
<body>
<h1>Custom Icons</h1>
<span class="custom-icon custom-icon-star"></span>
<span class="custom-icon custom-icon-heart"></span>
<span class="custom-icon custom-icon-user"></span>
</body>
</html>在上面的例子中,我们使用了 custom-icon 类和 custom-icon-图标名称 类来显示自定义的图标,需要注意的是,我们需要自行定义这些 CSS 类的样式。
这就是关于 Bootstrap 字体图标的介绍,希望对你有所帮助。