Bootstrap Icon Library
A free, high-quality, open-source icon library with over 2,000 icons.
Add Icon Before Element
In this example, we add a ‘Calendar’ icon before an element. The CSS ID or CSS Class defines the element, and the ‘::before’ defines where the icon is placed in relation to it.
- Adjust Line 1, replacing ‘yourCSSelement’ with a CSS ID (e.g., #element) or CSS Class (.element).
- If you want to adjust the icon’s color, adjust the fill=’white’ value on Line 6.
- Optionally adjust other icon settings like the size, margins, etc.
yourCSSelement::before {
content: "";
width: 1rem;
height: 1rem;
margin-left: 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
Add Icon After Element
Everything here is the same as the code snippet above, with the one difference being the ‘::after’ declaration on Line 1
yourCSSelement::after {
content: "";
width: 1.1rem;
height: 1.1rem;
margin: 0px 0px -2px 10px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1z'/%3E%3Cpath fill-rule='evenodd' d='M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-2 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
}
Change Icons
This is a bit hard to explain in words, but you can give it a go. Otherwise, watching the video should help make some sense of it.
- Bootstrap Icons
- Locate the desired icon.
- Copy HTML > Click the copy icon.
- From the copied HMTL, copy the contents of the first path, which is everything between the quotation marks (e.g., path d=” “).
- Paste the path contents into the code snippet above, replacing the first path.
- Repeat steps 4-5 for the second path.
- Save changes.
Video Tutorial
