Skip to content

Instantly share code, notes, and snippets.

@dmackerman
Last active May 3, 2023 16:36
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save dmackerman/4734551 to your computer and use it in GitHub Desktop.
Save dmackerman/4734551 to your computer and use it in GitHub Desktop.
If you use Font Awesome in ::before and ::after pseudo elements, you can use these variables instead of using the unrecognizable content definitions.
.booya {
&:before {
font-family: "FontAwesome";
content: '$icon-music';
}
}
$icon-glass: "\f000";
$icon-music: "\f001";
$icon-search: "\f002";
$icon-envelope: "\f003";
$icon-heart: "\f004";
$icon-star: "\f005";
$icon-star-empty: "\f006";
$icon-user: "\f007";
$icon-film: "\f008";
$icon-th-large: "\f009";
$icon-th: "\f00a";
$icon-th-list: "\f00b";
$icon-ok: "\f00c";
$icon-remove: "\f00d";
$icon-zoom-in: "\f00e";
$icon-zoom-out: "\f010";
$icon-off: "\f011";
$icon-signal: "\f012";
$icon-cog: "\f013";
$icon-trash: "\f014";
$icon-home: "\f015";
$icon-file: "\f016";
$icon-time: "\f017";
$icon-road: "\f018";
$icon-download-alt: "\f019";
$icon-download: "\f01a";
$icon-upload: "\f01b";
$icon-inbox: "\f01c";
$icon-play-circle: "\f01d";
$icon-repeat: "\f01e";
/* \f020 doesn't work in Safari. all shifted one down */
$icon-refresh: "\f021";
$icon-list-alt: "\f022";
$icon-lock: "\f023";
$icon-flag: "\f024";
$icon-headphones: "\f025";
$icon-volume-off: "\f026";
$icon-volume-down: "\f027";
$icon-volume-up: "\f028";
$icon-qrcode: "\f029";
$icon-barcode: "\f02a";
$icon-tag: "\f02b";
$icon-tags: "\f02c";
$icon-book: "\f02d";
$icon-bookmark: "\f02e";
$icon-print: "\f02f";
$icon-camera: "\f030";
$icon-font: "\f031";
$icon-bold: "\f032";
$icon-italic: "\f033";
$icon-text-height: "\f034";
$icon-text-width: "\f035";
$icon-align-left: "\f036";
$icon-align-center: "\f037";
$icon-align-right: "\f038";
$icon-align-justify: "\f039";
$icon-list: "\f03a";
$icon-indent-left: "\f03b";
$icon-indent-right: "\f03c";
$icon-facetime-video: "\f03d";
$icon-picture: "\f03e";
$icon-pencil: "\f040";
$icon-map-marker: "\f041";
$icon-adjust: "\f042";
$icon-tint: "\f043";
$icon-edit: "\f044";
$icon-share: "\f045";
$icon-check: "\f046";
$icon-move: "\f047";
$icon-step-backward: "\f048";
$icon-fast-backward: "\f049";
$icon-backward: "\f04a";
$icon-play: "\f04b";
$icon-pause: "\f04c";
$icon-stop: "\f04d";
$icon-forward: "\f04e";
$icon-fast-forward: "\f050";
$icon-step-forward: "\f051";
$icon-eject: "\f052";
$icon-chevron-left: "\f053";
$icon-chevron-right: "\f054";
$icon-plus-sign: "\f055";
$icon-minus-sign: "\f056";
$icon-remove-sign: "\f057";
$icon-ok-sign: "\f058";
$icon-question-sign: "\f059";
$icon-info-sign: "\f05a";
$icon-screenshot: "\f05b";
$icon-remove-circle: "\f05c";
$icon-ok-circle: "\f05d";
$icon-ban-circle: "\f05e";
$icon-arrow-left: "\f060";
$icon-arrow-right: "\f061";
$icon-arrow-up: "\f062";
$icon-arrow-down: "\f063";
$icon-share-alt: "\f064";
$icon-resize-full: "\f065";
$icon-resize-small: "\f066";
$icon-plus: "\f067";
$icon-minus: "\f068";
$icon-asterisk: "\f069";
$icon-exclamation-sign: "\f06a";
$icon-gift: "\f06b";
$icon-leaf: "\f06c";
$icon-fire: "\f06d";
$icon-eye-open: "\f06e";
$icon-eye-close: "\f070";
$icon-warning-sign: "\f071";
$icon-plane: "\f072";
$icon-calendar: "\f073";
$icon-random: "\f074";
$icon-comment: "\f075";
$icon-magnet: "\f076";
$icon-chevron-up: "\f077";
$icon-chevron-down: "\f078";
$icon-retweet: "\f079";
$icon-shopping-cart: "\f07a";
$icon-folder-close: "\f07b";
$icon-folder-open: "\f07c";
$icon-resize-vertical: "\f07d";
$icon-resize-horizontal: "\f07e";
$icon-bar-chart: "\f080";
$icon-twitter-sign: "\f081";
$icon-facebook-sign: "\f082";
$icon-camera-retro: "\f083";
$icon-key: "\f084";
$icon-cogs: "\f085";
$icon-comments: "\f086";
$icon-thumbs-up: "\f087";
$icon-thumbs-down: "\f088";
$icon-star-half: "\f089";
$icon-heart-empty: "\f08a";
$icon-signout: "\f08b";
$icon-linkedin-sign: "\f08c";
$icon-pushpin: "\f08d";
$icon-external-link: "\f08e";
$icon-signin: "\f090";
$icon-trophy: "\f091";
$icon-github-sign: "\f092";
$icon-upload-alt: "\f093";
$icon-lemon: "\f094";
$icon-phone: "\f095";
$icon-check-empty: "\f096";
$icon-bookmark-empty: "\f097";
$icon-phone-sign: "\f098";
$icon-twitter: "\f099";
$icon-facebook: "\f09a";
$icon-github: "\f09b";
$icon-unlock: "\f09c";
$icon-credit-card: "\f09d";
$icon-rss: "\f09e";
$icon-hdd: "\f0a0";
$icon-bullhorn: "\f0a1";
$icon-bell: "\f0a2";
$icon-certificate: "\f0a3";
$icon-hand-right: "\f0a4";
$icon-hand-left: "\f0a5";
$icon-hand-up: "\f0a6";
$icon-hand-down: "\f0a7";
$icon-circle-arrow-left: "\f0a8";
$icon-circle-arrow-right: "\f0a9";
$icon-circle-arrow-up: "\f0aa";
$icon-circle-arrow-down: "\f0ab";
$icon-globe: "\f0ac";
$icon-wrench: "\f0ad";
$icon-tasks: "\f0ae";
$icon-filter: "\f0b0";
$icon-briefcase: "\f0b1";
$icon-fullscreen: "\f0b2";
$icon-group: "\f0c0";
$icon-link: "\f0c1";
$icon-cloud: "\f0c2";
$icon-beaker: "\f0c3";
$icon-cut: "\f0c4";
$icon-copy: "\f0c5";
$icon-paper-clip: "\f0c6";
$icon-save: "\f0c7";
$icon-sign-blank: "\f0c8";
$icon-reorder: "\f0c9";
$icon-list-ul: "\f0ca";
$icon-list-ol: "\f0cb";
$icon-strikethrough: "\f0cc";
$icon-underline: "\f0cd";
$icon-table: "\f0ce";
$icon-magic: "\f0d0";
$icon-truck: "\f0d1";
$icon-pinterest: "\f0d2";
$icon-pinterest-sign: "\f0d3";
$icon-google-plus-sign: "\f0d4";
$icon-google-plus: "\f0d5";
$icon-money: "\f0d6";
$icon-caret-down: "\f0d7";
$icon-caret-up: "\f0d8";
$icon-caret-left: "\f0d9";
$icon-caret-right: "\f0da";
$icon-columns: "\f0db";
$icon-sort: "\f0dc";
$icon-sort-down: "\f0dd";
$icon-sort-up: "\f0de";
$icon-envelope-alt: "\f0e0";
$icon-linkedin: "\f0e1";
$icon-undo: "\f0e2";
$icon-legal: "\f0e3";
$icon-dashboard: "\f0e4";
$icon-comment-alt: "\f0e5";
$icon-comments-alt: "\f0e6";
$icon-bolt: "\f0e7";
$icon-sitemap: "\f0e8";
$icon-umbrella: "\f0e9";
$icon-paste: "\f0ea";
$icon-lightbulb: "\f0eb";
$icon-exchange: "\f0ec";
$icon-cloud-download: "\f0ed";
$icon-cloud-upload: "\f0ee";
$icon-user-md: "\f0f0";
$icon-stethoscope: "\f0f1";
$icon-suitcase: "\f0f2";
$icon-bell-alt: "\f0f3";
$icon-coffee: "\f0f4";
$icon-food: "\f0f5";
$icon-file-alt: "\f0f6";
$icon-building: "\f0f7";
$icon-hospital: "\f0f8";
$icon-ambulance: "\f0f9";
$icon-medkit: "\f0fa";
$icon-fighter-jet: "\f0fb";
$icon-beer: "\f0fc";
$icon-h-sign: "\f0fd";
$icon-plus-sign-alt: "\f0fe";
$icon-double-angle-left: "\f100";
$icon-double-angle-right: "\f101";
$icon-double-angle-up: "\f102";
$icon-double-angle-down: "\f103";
$icon-angle-left: "\f104";
$icon-angle-right: "\f105";
$icon-angle-up: "\f106";
$icon-angle-down: "\f107";
$icon-desktop: "\f108";
$icon-laptop: "\f109";
$icon-tablet: "\f10a";
$icon-mobile-phone: "\f10b";
$icon-circle-blank: "\f10c";
$icon-quote-left: "\f10d";
$icon-quote-right: "\f10e";
$icon-spinner: "\f110";
$icon-circle: "\f111";
$icon-reply: "\f112";
$icon-github-alt: "\f113";
$icon-folder-close-alt: "\f114";
$icon-folder-open-alt: "\f115";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment