如何从 HTML 代码调整 bootstrap 图标的大小

Question

我从https://icons.getbootstrap.com/icons/person-workspace/得到了这个 html 代码

如何从html文件本身调整该图标的尺寸（放大尺寸）？

我尝试使用 display-1 类，但它没有改变。

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-workspace " viewBox="0 0 16 16">
<path d="M4 16s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H4Zm4-5.95a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"\>
<path d="M2 1a2 2 0 0 0-2 2v9.5A1.5 1.5 0 0 0 1.5 14h.653a5.373 5.373 0 0 1 1.066-2H1V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v9h-2.219c.554.654.89 1.373 1.066 2h.653a1.5 1.5 0 0 0 1.5-1.5V3a2 2 0 0 0-2-2H2Z">

Answer 1

正如Bootstrap建议的那样，使用 h1 - h6 如下：

<i class="bi bi-house-door h1"></i>
<i class="bi bi-house-door h2"></i>
<i class="bi bi-house-door h3"></i>
<i class="bi bi-house-door h4"></i>
<i class="bi bi-house-door h5"></i>
<i class="bi bi-house-door h6"></i>

如果您想要更多更大的图标，请编写自己的类，例如

.icon-100 { font-size: 100px; }
.icon-200 { font-size: 200px; }
.icon-300 { font-size: 300px; }
 // and then
<i class="bi bi-house-door icon-100"></i>
<i class="bi bi-house-door icon-200"></i>
<i class="bi bi-house-door icon-300"></i>
 

Answer 2

在属性font-size内部设置stylehtml

<i class="bi bi-person" style="font-size: 70px;"></i>

<i class="bi bi-person" style="font-size: 70px;"></i>

Answer 3

只需更改宽度和高度的值即可。这些数字只是像素值。

改变

width="16" height="16"

到

width="100" height="100"

希望有帮助。或者您正在寻找更复杂的东西？