@@ -9,7 +9,8 @@ BootstrapVue icon components are built from
9 9
are opt-in, meaning that they explicitly need to be imported in order to be used. They are not
10 10
installed by default. You do not need `bootstrap-icons` as a dependency.
11 11 12 -
Icon components were added in BootstrapVue release `v2.2.0`.
12 +
Icon components were added in BootstrapVue release `v2.2.0`. Bootstrap Icons `v1.0.0-alpha3` icons
13 +
were added in BootstrapVue release `v2.8.0`.
13 14 14 15
<div class="alert alert-info small">
15 16
<p class="mb-0">
@@ -24,7 +25,7 @@ Icon components were added in BootstrapVue release `v2.2.0`.
24 25 25 26
## Icons
26 27 27 -
The library includes over 300 icons. Use the explorer below to search and browse the available
28 +
The library includes over 500 icons. Use the explorer below to search and browse the available
28 29
icons.
29 30 30 31
<div>
@@ -166,7 +167,7 @@ of the icon names listed in the [Icons](#icons) section above.
166 167
<template>
167 168
<div class="h2 mb-0">
168 169
<b-icon-arrow-up></b-icon-arrow-up>
169 -
<b-icon-alert-triangle-fill></b-icon-alert-triangle-fill>
170 +
<b-icon-exclamation-triangle-fill></b-icon-exclamation-triangle-fill>
170 171
</div>
171 172
</template>
172 173
@@ -179,7 +180,7 @@ of the icon names listed in the [Icons](#icons) section above.
179 180
<template>
180 181
<div class="h2 mb-0">
181 182
<b-icon icon="arrow-up"></b-icon>
182 -
<b-icon icon="alert-triangle"></b-icon>
183 +
<b-icon icon="exclamation-triangle"></b-icon>
183 184
</div>
184 185
</template>
185 186
@@ -197,13 +198,13 @@ provide a `variant` prop to apply one of the Bootstrap contextual text variant c
197 198
```html
198 199
<template>
199 200
<div class="h2 mb-0">
200 -
<b-icon icon="alert-circle-fill" variant="success"></b-icon>
201 -
<b-icon icon="alert-circle-fill" variant="warning"></b-icon>
202 -
<b-icon icon="alert-circle-fill" variant="danger"></b-icon>
203 -
<b-icon icon="alert-circle-fill" variant="info"></b-icon>
204 -
<b-icon icon="alert-circle-fill" variant="primary"></b-icon>
205 -
<b-icon icon="alert-circle-fill" variant="secondary"></b-icon>
206 -
<b-icon icon="alert-circle-fill" variant="dark"></b-icon>
201 +
<b-icon icon="exclamation-circle-fill" variant="success"></b-icon>
202 +
<b-icon icon="exclamation-circle-fill" variant="warning"></b-icon>
203 +
<b-icon icon="exclamation-circle-fill" variant="danger"></b-icon>
204 +
<b-icon icon="exclamation-circle-fill" variant="info"></b-icon>
205 +
<b-icon icon="exclamation-circle-fill" variant="primary"></b-icon>
206 +
<b-icon icon="exclamation-circle-fill" variant="secondary"></b-icon>
207 +
<b-icon icon="exclamation-circle-fill" variant="dark"></b-icon>
207 208
</div>
208 209
</template>
209 210
@@ -234,11 +235,11 @@ current font size:
234 235
```html
235 236
<template>
236 237
<div>
237 -
<p class="h1 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
238 -
<p class="h2 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
239 -
<p class="h3 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
240 -
<p class="h4 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
241 -
<p class="h5 mb-2">Icon <b-icon icon="alert-circle-fill"></b-icon></p>
238 +
<p class="h1 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
239 +
<p class="h2 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
240 +
<p class="h3 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
241 +
<p class="h4 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
242 +
<p class="h5 mb-2">Icon <b-icon icon="exclamation-circle-fill"></b-icon></p>
242 243
</div>
243 244
</template>
244 245
@@ -251,7 +252,7 @@ classes:
251 252
```html
252 253
<template>
253 254
<div>
254 -
<b-icon icon="alert-circle" style="width: 120px; height: 120px;"></b-icon>
255 +
<b-icon icon="exclamation-circle" style="width: 120px; height: 120px;"></b-icon>
255 256
</div>
256 257
</template>
257 258
@@ -281,15 +282,15 @@ Also see the [scaling transforms](#scale) section below for additional sizing op
281 282 282 283
## Styling
283 284 284 -
With the use of Bootstrap's border and background
285 +
With the use of Bootstrap's border, background and padding
285 286
[utility classes](/docs/reference/utility-classes), you can create various styling effects:
286 287 287 288
```html
288 289
<template>
289 290
<div style="font-size: 4rem;">
290 -
<b-icon icon="bell-fill" class="border rounded"></b-icon>
291 -
<b-icon icon="bell-fill" class="border border-info rounded" variant="info"></b-icon>
292 -
<b-icon icon="bell-fill" class="rounded-circle bg-danger p-1" variant="light"></b-icon>
291 +
<b-icon icon="bell-fill" class="border rounded p-2"></b-icon>
292 +
<b-icon icon="bell-fill" class="border border-info rounded p-2" variant="info"></b-icon>
293 +
<b-icon icon="bell-fill" class="rounded-circle bg-danger p-2" variant="light"></b-icon>
293 294
<b-icon icon="unlock-fill" class="rounded bg-primary p-1" variant="light"></b-icon>
294 295
</div>
295 296
</template>
@@ -351,16 +352,16 @@ but not its physical font size. To illustrate this we have added a background co
351 352
<template>
352 353
<b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
353 354
<b-col class="mb-2">
354 -
<b-icon icon="alert-circle" scale="0.5" class="bg-info"></b-icon>
355 +
<b-icon icon="exclamation-circle" scale="0.5" class="bg-info"></b-icon>
355 356
</b-col>
356 357
<b-col class="mb-2">
357 -
<b-icon icon="alert-circle" class="bg-info"></b-icon>
358 +
<b-icon icon="exclamation-circle" class="bg-info"></b-icon>
358 359
</b-col>
359 360
<b-col class="mb-2">
360 -
<b-icon icon="alert-circle" scale="1.5" class="bg-info"></b-icon>
361 +
<b-icon icon="exclamation-circle" scale="1.5" class="bg-info"></b-icon>
361 362
</b-col>
362 363
<b-col class="mb-2">
363 -
<b-icon icon="alert-circle" scale="2" class="bg-info"></b-icon>
364 +
<b-icon icon="exclamation-circle" scale="2" class="bg-info"></b-icon>
364 365
</b-col>
365 366
</b-row>
366 367
</template>
@@ -388,29 +389,29 @@ For clarity in the example, we’ve added a background color on the icon so you
388 389
<template>
389 390
<b-row cols="2" cols-sm="4" class="text-center" style="font-size: 4rem;">
390 391
<b-col class="py-4 mb-2">
391 -
<b-icon icon="alert-circle" class="bg-info"></b-icon>
392 +
<b-icon icon="exclamation-circle" class="bg-info"></b-icon>
392 393
</b-col>
393 394
<b-col class="py-4 mb-2">
394 -
<b-icon icon="alert-circle" shift-v="8" class="bg-info"></b-icon>
395 +
<b-icon icon="exclamation-circle" shift-v="8" class="bg-info"></b-icon>
395 396
</b-col>
396 397
<b-col class="py-4 mb-2">
397 -
<b-icon icon="alert-circle" shift-v="-8" class="bg-info"></b-icon>
398 +
<b-icon icon="exclamation-circle" shift-v="-8" class="bg-info"></b-icon>
398 399
</b-col>
399 400
<b-col class="py-4 mb-2">
400 -
<b-icon icon="alert-circle" shift-h="8" class="bg-info"></b-icon>
401 +
<b-icon icon="exclamation-circle" shift-h="8" class="bg-info"></b-icon>
401 402
</b-col>
402 403
<b-col class="py-4 mb-2">
403 -
<b-icon icon="alert-circle" shift-h="-8" class="bg-info"></b-icon>
404 +
<b-icon icon="exclamation-circle" shift-h="-8" class="bg-info"></b-icon>
404 405
</b-col>
405 406
<b-col class="py-4 mb-2">
406 -
<b-icon icon="alert-circle" shift-v="16" class="bg-info"></b-icon>
407 +
<b-icon icon="exclamation-circle" shift-v="16" class="bg-info"></b-icon>
407 408
</b-col>
408 409
<b-col class="py-4 mb-2">
409 -
<b-icon icon="alert-circle" shift-h="-8" shift-v="-8" class="bg-info"></b-icon>
410 +
<b-icon icon="exclamation-circle" shift-h="-8" shift-v="-8" class="bg-info"></b-icon>
410 411
</b-col>
411 412
<b-col class="py-4 mb-2">
412 413
<b-icon
413 -
icon="alert-circle"
414 +
icon="exclamation-circle"
414 415
scale="0.5"
415 416
rotate="45"
416 417
shift-h="-4"
@@ -518,14 +519,14 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
518 519
<template>
519 520
<div>
520 521
<b-iconstack font-scale="5">
521 -
<b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
522 -
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
522 +
<b-icon stacked icon="camera" variant="info" scale="0.75"></b-icon>
523 +
<b-icon stacked icon="slash-circle" variant="danger"></b-icon>
523 524
</b-iconstack>
524 525 525 526
<b-iconstack font-scale="5" rotate="90">
526 -
<b-icon stacked icon="chevron-right" shift-h="-3" variant="danger"></b-icon>
527 +
<b-icon stacked icon="chevron-right" shift-h="-4" variant="danger"></b-icon>
527 528
<b-icon stacked icon="chevron-right" shift-h="0" variant="success"></b-icon>
528 -
<b-icon stacked icon="chevron-right" shift-h="3" variant="primary"></b-icon>
529 +
<b-icon stacked icon="chevron-right" shift-h="4" variant="primary"></b-icon>
529 530
</b-iconstack>
530 531 531 532
<b-iconstack font-scale="5">
@@ -536,10 +537,10 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
536 537 537 538
<b-iconstack font-scale="5" variant="white">
538 539
<b-icon stacked icon="square-fill" variant="dark"></b-icon>
539 -
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="2.5" shift-h="-2.5"></b-icon>
540 -
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="2.5" shift-h="2.5" rotate="90"></b-icon>
541 -
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-2.5" shift-h="2.5" rotate="180"></b-icon>
542 -
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-2.5" shift-h="-2.5" rotate="270"></b-icon>
540 +
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="-3"></b-icon>
541 +
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="3" shift-h="3" rotate="90"></b-icon>
542 +
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="3" rotate="180"></b-icon>
543 +
<b-icon stacked icon="arrow-up-short" scale="0.5" shift-v="-3" shift-h="-3" rotate="270"></b-icon>
543 544
</b-iconstack>
544 545 545 546
<b-iconstack font-scale="5">
@@ -549,12 +550,12 @@ individual icons (`<b-icon>` or `<b-icon-{icon-name}>`) to create complex icons:
549 550 550 551
<b-iconstack font-scale="5">
551 552
<b-icon stacked icon="square"></b-icon>
552 -
<b-icon stacked icon="dot" shift-h="-2.25" shift-v="3"></b-icon>
553 -
<b-icon stacked icon="dot" shift-h="-2.25"></b-icon>
554 -
<b-icon stacked icon="dot" shift-h="-2.25" shift-v="-3"></b-icon>
555 -
<b-icon stacked icon="dot" shift-h="2.25" shift-v="3"></b-icon>
556 -
<b-icon stacked icon="dot" shift-h="2.25"></b-icon>
557 -
<b-icon stacked icon="dot" shift-h="2.25" shift-v="-3"></b-icon>
553 +
<b-icon stacked icon="dot" shift-h="-3" shift-v="4"></b-icon>
554 +
<b-icon stacked icon="dot" shift-h="-3"></b-icon>
555 +
<b-icon stacked icon="dot" shift-h="-3" shift-v="-4"></b-icon>
556 +
<b-icon stacked icon="dot" shift-h="3" shift-v="4"></b-icon>
557 +
<b-icon stacked icon="dot" shift-h="3"></b-icon>
558 +
<b-icon stacked icon="dot" shift-h="3" shift-v="-4"></b-icon>
558 559
</b-iconstack>
559 560
</div>
560 561
</template>
@@ -581,7 +582,7 @@ The `<b-iconstack>` component supports the same animations as individual icons:
581 582
<div>
582 583
<b-iconstack font-scale="5" animation="spin">
583 584
<b-icon stacked icon="camera" variant="info" scale="0.75" shift-v="-0.25"></b-icon>
584 -
<b-icon stacked icon="circle-slash" variant="danger"></b-icon>
585 +
<b-icon stacked icon="slash-circle" variant="danger"></b-icon>
585 586
</b-iconstack>
586 587
</div>
587 588
</template>
@@ -604,7 +605,7 @@ Individual icons within the icon stack can also be animated (except on IE 11):
604 605
></b-icon>
605 606
<b-icon
606 607
stacked
607 -
icon="circle-slash"
608 +
icon="slash-circle"
608 609
animation="spin-reverse"
609 610
variant="danger"
610 611
></b-icon>
@@ -651,7 +652,7 @@ font scaled by 125%).
651 652
</b-button>
652 653
<br>
653 654
<b-button size="lg" variant="primary" class="mb-2">
654 -
<b-icon icon="question-fill" aria-hidden="true"></b-icon>
655 +
<b-icon icon="question-circle-fill" aria-hidden="true"></b-icon>
655 656
<span class="sr-only">Help</span>
656 657
</b-button>
657 658
</div>
@@ -698,7 +699,7 @@ font scaled by 125%).
698 699
<b-icon icon="cloud-download" aria-hidden="true"></b-icon>
699 700
</b-button>
700 701
<b-button title="New document">
701 -
<b-icon icon="document" aria-hidden="true"></b-icon>
702 +
<b-icon icon="file-earmark" aria-hidden="true"></b-icon>
702 703
</b-button>
703 704
</b-button-group>
704 705
<b-button-group class="mr-1">
@@ -783,11 +784,11 @@ font scaled by 125%).
783 784
Cras justo odio
784 785
</b-list-group-item>
785 786
<b-list-group-item class="d-flex justify-content-between align-items-center">
786 -
<b-icon icon="alert-triangle-fill" scale="2" variant="warning"></b-icon>
787 +
<b-icon icon="exclamation-triangle-fill" scale="2" variant="warning"></b-icon>
787 788
Dapibus ac facilisis in
788 789
</b-list-group-item>
789 790
<b-list-group-item class="d-flex justify-content-between align-items-center">
790 -
<b-icon icon="info-fill" scale="2" variant="info"></b-icon>
791 +
<b-icon icon="info-circle-fill" scale="2" variant="info"></b-icon>
791 792
Morbi leo risus
792 793
</b-list-group-item>
793 794
<b-list-group-item class="d-flex justify-content-between align-items-center">
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4