blob: c93bcdcadbc58ff3102ab86ac003c895c9bdb2bb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<div id="icons">
<div class="hero py-5">
<div class="container">
<h1 class="f0">Bootstrap Icons</h1>
<p class="mb-4 f3 font-weight-normal">For the first time ever, Bootstrap has its own icon library, custom designed and built for our components and documentation.</p>
<div class="row text-muted">
<div class="col">
<p>Bootstrap Icons are designed first and foremost to work with <a href="{{ .Site.Params.main }}">Bootstrap</a> components, from form controls to navigation and more. Bootstrap Icons are SVGs, so they scale quickly and easily to any size and can be styled with CSS.</p>
</div>
<div class="col">
<p>Plus, while they're built for Bootstrap first, they're great for any project. They're open sourced (MIT), so you're free to download, use, and extend.</p>
</div>
<div class="col-md-3 col-lg-4">
<script async src="https://cdn.carbonads.com/carbon.js?serve=CE7D4277&placement=iconsgetbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<hr class="my-4">
<p class="text-muted">
Current version: <strong>v{{ .Site.Params.package_version }}</strong> <small class="py-1 px-2 font-weight-bold text-white bg-primary rounded">Alpha</small>
<span class="px-2">•</span>
<a href="{{ .Site.Params.package_repo }}">GitHub repo</a>
</p>
</div>
</div>
<nav class="bd-subnavbar pt-2 pb-3 pb-md-2">
<div class="container d-flex align-items-md-center py-2">
<label for="search" class="sr-only">Search for icons</label>
<input class="form-control search mr-2" id="search" placeholder="Start typing to filter..." autofocus>
<button class="btn btn-bd-primary sort text-nowrap" data-sort="icon-name">
Search
</button>
</div>
</nav>
<div class="container my-5">
{{ partial "icons-list" . }}
</div>
</div>
<div class="container">
<h2 id="usage">Usage</h2>
<button class="btn btn-primary mb-4" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="bi bi-house-fill" viewBox="0 0 20 20">
<g fill-rule="evenodd" fill="currentColor">
<path fill-rule="nonzero" d="M8.5 12.995V16.5a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V13c0-.25-.25-.5-.5-.5H9c-.25 0-.5.25-.5.495z"/>
<path d="M15 4.5V8l-2-2V4.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</g>
</svg>
Back home
</button>
<div class="btn-group mb-4">
<button class="btn btn-primary active" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="bi bi-house-fill" viewBox="0 0 20 20">
<g fill-rule="evenodd" fill="currentColor">
<path fill-rule="nonzero" d="M8.5 12.995V16.5a.5.5 0 0 1-.5.5H4a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V13c0-.25-.25-.5-.5-.5H9c-.25 0-.5.25-.5.495z"/>
<path d="M15 4.5V8l-2-2V4.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
</g>
</svg>
<span class="sr-only">Back home</span>
</button>
<button class="btn btn-primary" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="bi bi-gear" viewBox="0 0 20 20">
<g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(3 3)">
<path stroke-linejoin="round" d="M11.34 9.486l1.317 1.757-1.414 1.414-1.757-1.318a4.97 4.97 0 0 1-1.175.487L8 14H6l-.31-2.174a4.97 4.97 0 0 1-1.176-.487l-1.757 1.318-1.414-1.414 1.318-1.757a4.97 4.97 0 0 1-.487-1.175L0 8V6l2.174-.31a4.97 4.97 0 0 1 .487-1.176L1.343 2.757l1.414-1.414 1.757 1.318a4.97 4.97 0 0 1 1.175-.487L6 0h2l.31 2.174c.416.112.81.277 1.176.487l1.757-1.318 1.414 1.414-1.318 1.757c.21.365.375.76.487 1.175L14 6v2l-2.174.31a4.97 4.97 0 0 1-.487 1.176h0z"/>
<circle cx="7" cy="7" r="2"/>
</g>
</svg>
<span class="sr-only">Settings</span>
</button>
<button class="btn btn-primary" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="bi bi-star-outline" viewBox="0 0 20 20">
<path d="M5.612 17.443c-.386.198-.824-.149-.746-.592l.83-4.73-3.522-3.356c-.33-.314-.16-.888.282-.95l4.898-.696 2.184-4.327c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L10 15.187l-4.389 2.256zm.473-1.466l3.686-1.894a.503.503 0 0 1 .461 0l3.686 1.894-.694-3.957a.565.565 0 0 1 .163-.505l2.906-2.77-4.052-.576a.525.525 0 0 1-.393-.288l-1.846-3.658-1.847 3.658a.525.525 0 0 1-.393.288l-4.052.575 2.906 2.77a.565.565 0 0 1 .163.506l-.694 3.957z"/>
</svg>
<span class="sr-only">Starred</span>
</button>
</div>
<div class="list-group mb-4 mx-auto">
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Item with switch</div>
<div class="form-check form-switch ml-auto" style="font-size: 1.25rem;">
<input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch1" checked>
<label class="sr-only" for="playgroundSwitch1">Switch label</label>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Another with switch</div>
<div class="form-check form-switch ml-auto" style="font-size: 1.25rem;">
<input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch2">
<label class="sr-only" for="playgroundSwitch2">Another switch label</label>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Choose an option</div>
<div class="d-flex align-items-center ml-auto">
<span class="text-muted">Selected</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="bi bi-chevron-right" viewBox="0 0 20 20">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l6-6-6-6"/>
</svg>
</div>
</div>
</div>
<div class="list-group mb-4 mx-auto">
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Item with switch</div>
<div class="form-check form-switch ml-auto" style="font-size: 1.25rem;">
<input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch3" checked>
<label class="sr-only" for="playgroundSwitch3">Switch label</label>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Another with switch</div>
<div class="form-check form-switch ml-auto" style="font-size: 1.25rem;">
<input class="form-check-input ml-0" type="checkbox" id="playgroundSwitch4">
<label class="sr-only" for="playgroundSwitch4">Another switch label</label>
</div>
</div>
<div class="list-group-item d-flex align-items-center">
<div class="mb-0">Choose an option</div>
<div class="d-flex align-items-center ml-auto">
<span class="text-muted">Selected</span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="bi bi-chevron-right" viewBox="0 0 20 20">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l6-6-6-6"/>
</svg>
</div>
</div>
</div>
</div>
|
