Icons

Fanjy CSS uses its own icons. Most of icons have two weights: regular and solid. When using them, try to stick to one weight. We're using here Web components coupled with an icon sprite, generated with Icomoon.

How to use

In HTML

First, import the JS file for Web components:

<script src="/lib/fajny-icon.js"></script>

Then, copy the code and insert it in your HTML page.

<fajny-icon icon-name="icon-name"></fajny-icon>

In SCSS

You can use mixins to include your icon. Here, the color variable is not required.

div:after {
    @include icon(icon-name, size, color)
}
align-bottom-center align-bottom-left align-bottom-right align-bottom align-center align-left align-middle-center align-middle-left align-middle-right align-middle align-right align-top-center align-top-left align-top-right align-top american-express-card american-express angular apple-music apple-pay-badge apple-pay-card apple-pay apple arrow-down-circle-full arrow-down-circle arrow-down-up arrow-down arrow-left-circle-full arrow-left-circle arrow-left-right arrow-left-up-right-down arrow-left arrow-right-circle-full arrow-right-circle arrow-right-left arrow-right-up-left-down arrow-right arrow-up-circle-full arrow-up-circle arrow-up-down arrow-up atlassian-alt atlassian backslash backward basket battery-charging battery-empty battery-full battery-half behance-square behance bell-slash bell bitbucket-alt bitbucket bluetooth-alt bluetooth bone book-open book bookmark-full bookmark box-open box brackets brightness-minus brightness-plus browser-window-close browser-window-minus browser-window-plus browser-window browser-windows bubble-message-check bubble-message-code bubble-message-dots bubble-message-edit bubble-message-exclamation bubble-message-lines bubble-message-minus bubble-message-plus bubble-message-slash bubble-message bubbles-message bullseye-arrow bullseye-pointer bullseye burger-alt burger calculator calendar-check calendar-days calendar-minus calendar-plus calendar camera caret-down caret-left-right caret-left caret-right caret-up-down caret-up cart-arrow cart-minus cart-percentage cart-plus cart cash chart-bar check-circle-full check-circle check chevron-down chevron-left-right chevron-left chevron-right chevron-up-down chevron-up chrome chromecast-cast chromecast circle-full circle clipboard-check clipboard-list clipboard clock-full clock close-circle-full close-circle close cloud-download cloud code-branch code codepen-alt codepen-circle codepen cog cogs collection color-palette compass confluence-alt confluence cookie copy credit-card crop crosshair css curly-brackets dashboard database delete desktop diamond-full diamond diners-club-card diners-club distribute-horizontal distribute-vertical divide docker-alt docker donut double-chevron-down double-chevron-left double-chevron-right double-chevron-up download draw-circle draw-square dribbble-alt dribbble-square dribbble dropbox-alt dropbox ebay edge edit ellipsis-horizontal ellipsis-vertical equal erlenmeyer-filled erlenmeyer external-link eye-slash eye facebook-square facebook fajny-css fast-backward fast-forward fast female figma file-code file-download file-lock file-search file-upload file-user file files filter-close filter-minus filter-plus filter fingerprint firefox flag-full flag folder-close folder-minus folder-open folder-plus folder-tree folder forward gift github-square github gitlab-alt gitlab globe google-alt google-cardboard google-drive google grid-horizontal grid-vertical grid hashtag headphones heart-full heart history home hourglass html image images inferior-or-equal inferior information instagram internet-explorer itunes java javascript jira-align-alt jira-align jira-software-alt jira-software kebab-menu key keyboard-brightness-minus keyboard-brightness-plus keyboard layer-group layer-minus layer-plus less lightbulb-exclamation lightbulb-on lightbulb lightning link linkedin-alt linkedin-square linkedin linux list location-arrow lock-open lock login logout magnifying-glass-full magnifying-glass-minus-full magnifying-glass-minus magnifying-glass-plus-full magnifying-glass-plus magnifying-glass mail-open-letter mail-open mail male map-pin map masonry mastercard-card mastercard maximise medal medium-square medium messenger microchip microsoft-alt microsoft minimize minus-circle-full minus-circle minus mobile-slash mobile molecule-full molecule moon mug network-signal-slash network-signal newspaper node not-allowed-full not-allowed not-equal npm octagon-check-full octagon-check octagon-close-full octagon-close octagon-exclamation-full octagon-exclamation octagon-full octagon-minus-full octagon-minus octagon-plus-full octagon-plus octagon opera-alt opera paperclip paperplane pause paw paypal-alt paypal-card paypal pen pencil percentage phone-arrow-bottom-left phone-arrow-up-right phone-minus phone-plus phone-slash phone php piechart pin pinterest-alt pinterest-square pinterest plane planet play-pause play playstation plus-circle-full plus-circle plus-minus plus pointer power previous pricetag pricetags python-alt python qr-code quit react reload rocket safari sass-alt sass save send server settings share shield-check shield-close shield-minus shield-plus shield-slash shield signal-0-bar signal-1-bar signal-2-bar signal-3-bar signal-4-bar signal-5-bar sitemap sketch skype slack-alt slack slash snapchat-square snapchat sort-ascending sort-descending sourcetree-alt sourcetree spacing-horizontal spacing-vertical squarespace-alt squarespace stack-overflow-alt stack-overflow stadia-alt stadia star-full star-half-full star steam-alt steam sticky-note stop-full stop stopwatch store sun superior-or-equal superior sync table-list telegram temperature terminal tiktok-square tiktok transgender trash-close trash-slash trash trello-alt trello twitter-square twitter undo unity-alt unity unlink unsplash-alt unsplash upload usb user-card-clip user-card user-check user-circle user-clock user-close user-cog user-edit user-lock user-minus user-plus user-shield user-slash user users-three users-two video-close video-plus video view-add view-board view-card view-list visa-card visa volume-down volume-slash volume-up volume wallet wand warning-circle-full warning-circle warning-full warning wifi wikipedia-w windows wordpress-alt wordpress xbox xing-alt xing-square xing youtube-alt youtube-square youtube