Resize SVG bootstrap icon

Question

Is it possible to resize a bootstrap icon in CSS? The icons are SVG. I am adding the icon in HTML, not via CSS.

You have added the SVG inline code of the icon to HTML? – Alexandr_TT Feb 20 '21 at 17:12 — Alexandr_TT, Feb 20 '21 at 17:12

score 5 · Answer 1 · answered Sep 20 '21 at 22:10

5

Changing the font-size solve it for me:

<i class='bi bi-search' style='font-size:26px;'></i>

answered Sep 20 '21 at 22:10

mvoelcker

330
4
8

score 1 · Answer 2 · answered Feb 20 '21 at 17:13

1

You can create your own css class:

svg.bi.bi-icon-sm {
    height: 8px !important;
    width: 8px !important;
}

...

svg.bi.bi-icon-xl {
    height: 32px !important;
    width: 32px !important;
}

answered Feb 20 '21 at 17:13

JOPimentel

139
1
11

score 1 · Answer 3 · answered Oct 17 '22 at 18:53

1

It is possible to use the bootstrap predefined font sizes https://getbootstrap.com/docs/5.2/utilities/text/#font-size

E.g.:

<span class="bi bi-box-arrow-right fs-3"></span>

answered Oct 17 '22 at 18:53

appsofteng

152
5

Resize SVG bootstrap icon

3 Answers3