Font icons
Retina-ready font icons with a modern touch that will beautifully complement your project.
We have included Bootstrap Icons and Iconstica in the Folio theme. Below are the instructions on how to use them effectively.
Bootstrap Icons:
Bootstrap Icons are also included in the Folio theme. Similar to Font Awesome, Bootstrap Icons can be used by adding specific class names.
Add icons to your HTML
Use the <i>
tag with the appropriate class names to add icons:
<i class="bi bi-alarm"></i>
A complete list of Bootstrap icons along with the class names can be found here
Iconstica Icons:
In Folio, we've incorporated free Iconstica icons. These icons offer a wide variety of high-quality options for different purposes. Check out the free icons here.
How to Use Iconstica Icons?
To use Iconstica icons in your project, head over to the Iconstica web app, copy the icon's code, and paste it into your project. You can easily adjust the size or color as needed. Below is an example of the icon's SVG code:
<svg class="text-primary" width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M41.5812 5.73541C42.4755 5.6878 43.2267 6.4001 43.2268 7.29567C43.2269 13.8143 42.6409 18.8998 41.541 22.788C40.441 26.6766 38.7961 29.4729 36.6033 31.2632C32.5146 34.6013 27.199 33.9631 21.9796 32.0571C23.4158 28.3359 25.8081 25.0887 29.3104 23.7778C30.1186 23.4753 30.5285 22.575 30.226 21.7668C29.9235 20.9586 29.0232 20.5486 28.215 20.8511C23.8177 22.4969 21.0169 26.2907 19.3648 30.1898C17.4616 27.1276 16.4531 24.1562 16.4066 21.3509C16.3559 18.2854 17.4583 15.553 19.5442 13.2865C23.6288 8.8482 31.3809 6.27845 41.5812 5.73541ZM19.3648 30.1898C19.168 30.6543 18.9875 31.1203 18.8225 31.5843C18.3369 32.9501 17.9746 34.3281 17.7223 35.6495C17.5234 35.2543 17.3162 34.8545 17.1014 34.4543C16.0691 32.531 14.8248 30.5291 13.4449 28.9866C12.1246 27.5107 10.3818 26.1181 8.33203 26.1181C7.46909 26.1181 6.76953 26.8177 6.76953 27.6806C6.76953 28.5436 7.46909 29.2431 8.33203 29.2431C8.97047 29.2431 9.91593 29.7288 11.1159 31.0701C12.2562 32.3448 13.3641 34.0992 14.348 35.9322C15.3244 37.7513 16.1429 39.5801 16.719 40.9601C17.0063 41.6484 17.2317 42.221 17.3845 42.6196C17.4609 42.8189 17.5191 42.9744 17.5578 43.079C17.5771 43.1313 17.5916 43.1709 17.601 43.1967L17.6113 43.2251L17.6135 43.2314L17.6138 43.2323L17.6139 43.2325L17.6139 43.2326C17.8947 44.0168 18.7414 44.4429 19.5386 44.2011C20.3358 43.9592 20.8031 43.1344 20.6007 42.3262C20.3928 41.4965 20.3128 40.0863 20.4886 38.3158C20.6617 36.5727 21.0725 34.5843 21.7669 32.6311C21.8354 32.4387 21.9062 32.2473 21.9796 32.0571C21.5007 31.8822 21.0225 31.6966 20.5462 31.5024C20.2561 31.3842 20.0082 31.1814 19.8348 30.9205C19.6725 30.6764 19.5158 30.4328 19.3648 30.1898Z" fill="currentColor"></path>
</svg>
You can also explore the premium icons here.
Note:We've kept the package lightweight by using primarily Bootstrap icons, along with a few Iconstica icons. If your project requires a broader range of icons that Bootstrap doesn't cover, consider using Font Awesome or Feather icons.