1.3 #Atoms.icons Icons
Fontawesome v5 icons.
Example
Font Awesome v5 icons
You can search for more icons here: https://fontawesome.com/v5/search
fa-light fa-arrow-left-long
fa-light fa-arrow-right-long
fa-solid fa-chevron-down
fa-regular fa-arrow-up-right
fa-regular fa-envelope
fa-regular fa-file-pdf
fa-light fa-xmark
fa-regular fa-clock
fa-light fa-circle-info
fa-light fa-magnifying-glass
fa-solid fa-user
fa-solid fa-heart
fa-solid fa-house
fa-solid fa-star
fa-regular fa-location-dot
fa-regular fa-bus
fa-regular fa-phone
fa-regular fa-link
Social icons
fa-brands fa-facebook
fa-brands fa-google
fa-brands fa-twitter
fa-brands fa-linkedin-in
Installation notes
If you want to use the fontawesome icons, you need to add following script to the head of your application:
<script src="https://kit.fontawesome.com/0f7402df08.js" crossorigin="anonymous"></script>
Markup: scss/styleguide/atoms/icons/icons.html
<div class="kss__icon__wrapper mb-5">
<div class="container">
<div class="row gy-2 gx-2">
<div class="col-12 mb-2 mt-5">
<span class="kss__markup-title">Font Awesome v5 icons</span>
<span class="kss__markup-subtitle">You can search for more icons here: <a href="https://fontawesome.com/v5/search" target="_blank">https://fontawesome.com/v5/search</a></span></span>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-light fa-arrow-left-long icon--cl"></i>
<span class="kss__icon__name">fa-light fa-arrow-left-long</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-light fa-arrow-right-long icon--cl"></i>
<span class="kss__icon__name">fa-light fa-arrow-right-long</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-solid fa-chevron-down icon--cl"></i>
<span class="kss__icon__name">fa-solid fa-chevron-down</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-regular fa-arrow-up-right icon--cl"></i>
<span class="kss__icon__name">fa-regular fa-arrow-up-right</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-regular fa-envelope icon--cl"></i>
<span class="kss__icon__name">fa-regular fa-envelope</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-regular fa-file-pdf icon--cl"></i>
<span class="kss__icon__name">fa-regular fa-file-pdf</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-light fa-xmark icon--cl"></i>
<span class="kss__icon__name">fa-light fa-xmark</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-regular fa-clock icon--cl"></i>
<span class="kss__icon__name">fa-regular fa-clock</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-light fa-circle-info icon--cl"></i>
<span class="kss__icon__name">fa-light fa-circle-info</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-light fa-magnifying-glass icon--cl"></i>
<span class="kss__icon__name">fa-light fa-magnifying-glass</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-solid fa-user icon--cl"></i>
<span class="kss__icon__name">fa-solid fa-user</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-solid fa-heart icon--cl"></i>
<span class="kss__icon__name">fa-solid fa-heart</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-solid fa-house icon--cl"></i>
<span class="kss__icon__name">fa-solid fa-house</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-solid fa-star icon--cl"></i>
<span class="kss__icon__name">fa-solid fa-star</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-regular fa-location-dot icon--cl"></i>
<span class="kss__icon__name">fa-regular fa-location-dot</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-regular fa-bus icon--cl"></i>
<span class="kss__icon__name">fa-regular fa-bus</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-regular fa-phone icon--cl"></i>
<span class="kss__icon__name">fa-regular fa-phone</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-regular fa-link icon--cl"></i>
<span class="kss__icon__name">fa-regular fa-link</span>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row gy-2 gx-2">
<div class="col-12 mb-2 mt-5">
<span class="kss__markup-title">Social icons</span>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-brands fa-facebook icon--cl"></i>
<span class="kss__icon__name">fa-brands fa-facebook</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-brands fa-google icon--cl"></i>
<span class="kss__icon__name">fa-brands fa-google</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-brands fa-twitter icon--cl"></i>
<span class="kss__icon__name">fa-brands fa-twitter</span>
</div>
</div>
<div class="col-6 col-md-2">
<div class="kss__icon">
<i class="fa-brands fa-linkedin-in icon--cl"></i>
<span class="kss__icon__name">fa-brands fa-linkedin-in</span>
</div>
</div>
<!--
<div class="col-12">
<a href="./dist/img/static/custom-icons.zip" class="button js-button mt-5" data-flip="Download custom icons" download>
<span class="button__content__wrapper">
<span class="button__content button__content--noflip">
<span class="icon--btn-wrapper me-3">
<i class="fa-regular fa-file-pdf icon--cl"></i>
</span>
<span class="button__content__label">
Download custom icons
</span>
</span>
<span class="button__content button__content--flip">
<span class="icon--btn-wrapper me-3">
<i class="fa-regular fa-file-pdf icon--cl"></i>
</span>
<span class="button__content__label js-button-flip-label">
</span>
</span>
</span>
</a>
</div>
-->
</div>
</div>
<div class="container">
<div class="row gy-2 gx-2">
<div class="col-12 mb-2 mt-5">
<span class="kss__markup-title pb-small">Installation notes</span>
<div class="wysiwyg">
<p>
If you want to use the fontawesome icons, you need to add following script to the head of your application: <br>
</p>
<code>
<script src="https://kit.fontawesome.com/0f7402df08.js" crossorigin="anonymous"></script>
</code>
</div>
</div>
</div>
</div>
</div>
Source:
../client/scss/styleguide/atoms/icons/_icons.scss, line 1