How to adjust size of bootstrap icons from HTML code

S

7

10

I got this html code from https://icons.getbootstrap.com/icons/person-workspace/

How to adjust the size(to enlarge the size) of this icon from the html file itself?

I tried using display-1 class, but it didn't changed.

<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">

Spank answered 24/3, 2022 at 7:27 Comment(0)

D

4

Just change the value for width and height. The numbers are just the pixel values.

Change

width="16" height="16"

to

width="100" height="100"

Hope that helps. Or are you looking for something more sophisticated?

Durden answered 24/3, 2022 at 7:50 Comment(0)

R

15

As Bootstrap suggests, use h1 - h6 like this:

<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>

If you want more bigger icons then write your own class like

.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>

Rockwood answered 2/5, 2023 at 15:25 Comment(1)

Bootstrap doesn't suggest this, definitely not on the linked page. See my answer here. – Blanketyblank 11/1 at 23:1

B

11

Unlike the top-voted answer suggests, Bootstrap actually recommends styling icons with font-size, not with header tags, which is semantically bad and therefore bad practice:

We recommend using a width: 1em (and optionally height: 1em) for easy resizing via font-size.

You can do this with CSS using font-size or by using the Bootstrap font-size classes:

<i class="bi bi-house-door fs-1"></i>
<i class="bi bi-house-door fs-2"></i>
<i class="bi bi-house-door fs-3"></i>
<i class="bi bi-house-door fs-4"></i>
<i class="bi bi-house-door fs-4"></i>
<i class="bi bi-house-door fs-6"></i>

So if using an embedded SVG, change width (and optionally height) to 1em and add a class of fs-3 (for example):

<svg xmlns="http://www.w3.org/2000/svg" width="1em" class="bi bi-person-workspace fs-3" viewBox="0 0 16 16" ...>

Blanketyblank answered 18/9, 2023 at 22:34 Comment(0)

U

8

Set font-size inside of style attribute in html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <div class="container">
      <div class="row text-center">
        <div class="col">
          <i class="bi bi-person" style="font-size: 10px;"></i>
        </div>
      <div>
      <div class="row text-center">
        <div class="col">
          <i class="bi bi-person" style="font-size: 20px;"></i>
        </div>
      <div>
      <div class="row text-center">
        <div class="col">
          <i class="bi bi-person" style="font-size: 40px;"></i>
        </div>
      <div>
      <div class="row text-center">
        <div class="col">
          <i class="bi bi-person" style="font-size: 80px; color: green;"></i>
        </div>
      <div>
      <div class="row text-center">
        <div class="col">
          <i class="bi bi-person" style="font-size: 160px; color: orange;"></i>
        </div>
      <div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">
    </script>
</body>
</html>

Unkennel answered 23/1, 2023 at 7:49 Comment(0)

D

4

Just change the value for width and height. The numbers are just the pixel values.

Change

width="16" height="16"

to

width="100" height="100"

Hope that helps. Or are you looking for something more sophisticated?

Durden answered 24/3, 2022 at 7:50 Comment(0)

R

3

You can use font-size and color to change the appearance of icons in html itself like

<i class="bi-alarm" style="font-size: 2rem; color: red;"></i>

For more information check Bootstrap icons official documentation

Raines answered 8/3, 2023 at 0:28 Comment(0)

T

0

In your HTML and with an SVG hopefully you can simply dictate height="--px" and width="--px". You have already done this and it is set to 16x16 pixels. Perhaps try it at 24px and 32px as well.

Thermomotor answered 24/3, 2022 at 7:42 Comment(0)

B

0

if you a re using bootstrap then Icon works with FONT SIZE - just add a custom style to it. (note I am using REACT)

HTML:

<i className="bi bi-list hamIcon"></i>

CSS:

.hamIcon{
  font-size: 2em;  
}

Bergmann answered 18/12, 2022 at 1:34 Comment(0)

Recommended topics

Hot tags