如果我们需要更改字形的大小，请使用 CSS font-size 属性。
其中我们将展示一些例子并解释它们。
让我们从一个例子开始，我们增加所有的字形并将它们的字体大小设置为 50px。
增加所有字形的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossoroirn="anonymous">
<style>
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
div i {
margin: 5px 20px;
}
.glyphicon {
font-size: 50px;
}
</style>
</head>
<body>
<h1>Example</h1>
<div>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-picture"></i>
<i class="glyphicon glyphicon-phone-alt"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</div>
</body>
</html>
在上面的示例中，我们为 <i> 元素指定了 margin 属性，并使用 background-color、margin 和 padding 属性设置了 <body> 元素的样式。
现在，让我们只增加一个字形等。
仅增加一个字形的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossoroirn="anonymous">
<style>
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
div i {
margin: 5px 20px;
}
.glyphicon.glyphicon-phone-alt {
font-size: 35px;
}
</style>
</head>
<body>
<h1>Example</h1>
<div>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-picture"></i>
<i class="glyphicon glyphicon-phone-alt"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</div>
</body>
</html>
所以，我们只在我们想要增加的图标上设置字体大小。
仅增加和更改一个字形的颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossoroirn="anonymous">
<style>
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
div i {
margin: 5px 20px;
}
.glyphicon {
font-size: 30px;
}
.glyphicon.glyphicon-phone-alt {
font-size: 60px;
color: green;
}
</style>
</head>
<body>
<h1>Example</h1>
<div>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-picture"></i>
<i class="glyphicon glyphicon-phone-alt"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</div>
</body>
</html>
日期：2020-06-02 22:15:06 来源：oir作者：oir