Last active
May 16, 2019 03:28
-
-
Save amcgregor/53898a4dcf36082f007d2950deb1f8a3 to your computer and use it in GitHub Desktop.
A mixin for easily utilizing (and customizing the behaviour of) FontAwesome icons in SCSS/SASS CSS.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Now available in CodePen form: | |
| // https://codepen.io/amcgregor/pen/yWgMPQ?editors=1100#0 | |
| @include "icons"; | |
| a:not(.no-icon) { | |
| &[href^="https://twitter"], | |
| &[href^="https://www.twitter"] { @include icon($icon-twitter-square, false, true) { margin: 0; }; } | |
| &[href^="https://facebook.com"], | |
| &[href^="https://www.facebook.com"] { @include icon($icon-facebook-square, false, true) { margin: 0; }; } | |
| &[href^="https://plus.google.com"] { @include icon($icon-google-plus-square, false, true) { margin: 0; }; } | |
| &[href^="https://linkedin.com"], | |
| &[href^="https://www.linkedin.com"] { @include icon($icon-linkedin-square, false, true) { margin: 0; }; } | |
| &[href^="https://youtube.com"], | |
| &[href^="https://www.youtube.com"] { @include icon($icon-youtube-square, false, true) { margin: 0; }; } | |
| &[href$="/account/authenticate"] { @include icon($icon-sign-in, false, true) { margin: 0; }; } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // FontAwesome 4.7.0, Adapted | |
| @font-face { | |
| font-family: 'FontAwesome'; | |
| src: url('//cdn.jsdelivr.net/fontawesome/4.7.0/fonts/fontawesome-webfont.eot?v=4.7.0'); | |
| src: url('//cdn.jsdelivr.net/fontawesome/4.7.0/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('//cdn.jsdelivr.net/fontawesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('//cdn.jsdelivr.net/fontawesome/4.7.0/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('//cdn.jsdelivr.net/fontawesome/4.7.0/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('//cdn.jsdelivr.net/fontawesome/4.7.0/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| // Basic Operation | |
| .icon { | |
| &:before { | |
| display: inline-block !important; | |
| font-family: FontAwesome !important; | |
| font-weight: normal !important; | |
| font-style: default !important; | |
| text-decoration: none !important; | |
| line-height: 1; | |
| text-rendering: auto; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| margin-right: ceil($theme_content_separation / 2); | |
| } | |
| } | |
| @mixin icon($icon:'', $minimal:false, $fixed:false) { | |
| @if not($minimal) { | |
| @extend .icon; | |
| } | |
| &:before { | |
| @if $icon { | |
| content: $icon; | |
| } | |
| @if $fixed { | |
| width: 1.28571429em; | |
| text-align: center; | |
| } | |
| @content; | |
| } | |
| } | |
| [data-icon] { | |
| padding-left: 3.5em; | |
| position: relative; | |
| vertical-align: middle; | |
| @include icon(attr(data-icon)) { | |
| margin-left: -3.5em; | |
| width: 3.5em; | |
| text-align: center; | |
| } | |
| } | |
| // Icon Declarations | |
| $icon-500px: "\f26e"; | |
| $icon-address-book: "\f2b9"; | |
| $icon-address-book-o: "\f2ba"; | |
| $icon-address-card: "\f2bb"; | |
| $icon-address-card-o: "\f2bc"; | |
| $icon-adjust: "\f042"; | |
| $icon-adn: "\f170"; | |
| $icon-align-center: "\f037"; | |
| $icon-align-justify: "\f039"; | |
| $icon-align-left: "\f036"; | |
| $icon-align-right: "\f038"; | |
| $icon-amazon: "\f270"; | |
| $icon-ambulance: "\f0f9"; | |
| $icon-american-sign-language-interpreting: "\f2a3"; | |
| $icon-anchor: "\f13d"; | |
| $icon-android: "\f17b"; | |
| $icon-angellist: "\f209"; | |
| $icon-angle-double-down: "\f103"; | |
| $icon-angle-double-left: "\f100"; | |
| $icon-angle-double-right: "\f101"; | |
| $icon-angle-double-up: "\f102"; | |
| $icon-angle-down: "\f107"; | |
| $icon-angle-left: "\f104"; | |
| $icon-angle-right: "\f105"; | |
| $icon-angle-up: "\f106"; | |
| $icon-apple: "\f179"; | |
| $icon-archive: "\f187"; | |
| $icon-area-chart: "\f1fe"; | |
| $icon-arrow-circle-down: "\f0ab"; | |
| $icon-arrow-circle-left: "\f0a8"; | |
| $icon-arrow-circle-o-down: "\f01a"; | |
| $icon-arrow-circle-o-left: "\f190"; | |
| $icon-arrow-circle-o-right: "\f18e"; | |
| $icon-arrow-circle-o-up: "\f01b"; | |
| $icon-arrow-circle-right: "\f0a9"; | |
| $icon-arrow-circle-up: "\f0aa"; | |
| $icon-arrow-down: "\f063"; | |
| $icon-arrow-left: "\f060"; | |
| $icon-arrow-right: "\f061"; | |
| $icon-arrow-up: "\f062"; | |
| $icon-arrows: "\f047"; | |
| $icon-arrows-alt: "\f0b2"; | |
| $icon-arrows-h: "\f07e"; | |
| $icon-arrows-v: "\f07d"; | |
| $icon-asl-interpreting: "\f2a3"; | |
| $icon-assistive-listening-systems: "\f2a2"; | |
| $icon-asterisk: "\f069"; | |
| $icon-at: "\f1fa"; | |
| $icon-audio-description: "\f29e"; | |
| $icon-automobile: "\f1b9"; | |
| $icon-backward: "\f04a"; | |
| $icon-balance-scale: "\f24e"; | |
| $icon-ban: "\f05e"; | |
| $icon-bandcamp: "\f2d5"; | |
| $icon-bank: "\f19c"; | |
| $icon-bar-chart: "\f080"; | |
| $icon-bar-chart-o: "\f080"; | |
| $icon-barcode: "\f02a"; | |
| $icon-bars: "\f0c9"; | |
| $icon-bath: "\f2cd"; | |
| $icon-bathtub: "\f2cd"; | |
| $icon-battery: "\f240"; | |
| $icon-battery-0: "\f244"; | |
| $icon-battery-1: "\f243"; | |
| $icon-battery-2: "\f242"; | |
| $icon-battery-3: "\f241"; | |
| $icon-battery-4: "\f240"; | |
| $icon-battery-empty: "\f244"; | |
| $icon-battery-full: "\f240"; | |
| $icon-battery-half: "\f242"; | |
| $icon-battery-quarter: "\f243"; | |
| $icon-battery-three-quarters: "\f241"; | |
| $icon-bed: "\f236"; | |
| $icon-beer: "\f0fc"; | |
| $icon-behance: "\f1b4"; | |
| $icon-behance-square: "\f1b5"; | |
| $icon-bell: "\f0f3"; | |
| $icon-bell-o: "\f0a2"; | |
| $icon-bell-slash: "\f1f6"; | |
| $icon-bell-slash-o: "\f1f7"; | |
| $icon-bicycle: "\f206"; | |
| $icon-binoculars: "\f1e5"; | |
| $icon-birthday-cake: "\f1fd"; | |
| $icon-bitbucket: "\f171"; | |
| $icon-bitbucket-square: "\f172"; | |
| $icon-bitcoin: "\f15a"; | |
| $icon-black-tie: "\f27e"; | |
| $icon-blind: "\f29d"; | |
| $icon-bluetooth: "\f293"; | |
| $icon-bluetooth-b: "\f294"; | |
| $icon-bold: "\f032"; | |
| $icon-bolt: "\f0e7"; | |
| $icon-bomb: "\f1e2"; | |
| $icon-book: "\f02d"; | |
| $icon-bookmark: "\f02e"; | |
| $icon-bookmark-o: "\f097"; | |
| $icon-braille: "\f2a1"; | |
| $icon-briefcase: "\f0b1"; | |
| $icon-btc: "\f15a"; | |
| $icon-bug: "\f188"; | |
| $icon-building: "\f1ad"; | |
| $icon-building-o: "\f0f7"; | |
| $icon-bullhorn: "\f0a1"; | |
| $icon-bullseye: "\f140"; | |
| $icon-bus: "\f207"; | |
| $icon-buysellads: "\f20d"; | |
| $icon-cab: "\f1ba"; | |
| $icon-calculator: "\f1ec"; | |
| $icon-calendar: "\f073"; | |
| $icon-calendar-check-o: "\f274"; | |
| $icon-calendar-minus-o: "\f272"; | |
| $icon-calendar-o: "\f133"; | |
| $icon-calendar-plus-o: "\f271"; | |
| $icon-calendar-times-o: "\f273"; | |
| $icon-camera: "\f030"; | |
| $icon-camera-retro: "\f083"; | |
| $icon-car: "\f1b9"; | |
| $icon-caret-down: "\f0d7"; | |
| $icon-caret-left: "\f0d9"; | |
| $icon-caret-right: "\f0da"; | |
| $icon-caret-square-o-down: "\f150"; | |
| $icon-caret-square-o-left: "\f191"; | |
| $icon-caret-square-o-right: "\f152"; | |
| $icon-caret-square-o-up: "\f151"; | |
| $icon-caret-up: "\f0d8"; | |
| $icon-cart-arrow-down: "\f218"; | |
| $icon-cart-plus: "\f217"; | |
| $icon-cc: "\f20a"; | |
| $icon-cc-amex: "\f1f3"; | |
| $icon-cc-diners-club: "\f24c"; | |
| $icon-cc-discover: "\f1f2"; | |
| $icon-cc-jcb: "\f24b"; | |
| $icon-cc-mastercard: "\f1f1"; | |
| $icon-cc-paypal: "\f1f4"; | |
| $icon-cc-stripe: "\f1f5"; | |
| $icon-cc-visa: "\f1f0"; | |
| $icon-certificate: "\f0a3"; | |
| $icon-chain: "\f0c1"; | |
| $icon-chain-broken: "\f127"; | |
| $icon-check: "\f00c"; | |
| $icon-check-circle: "\f058"; | |
| $icon-check-circle-o: "\f05d"; | |
| $icon-check-square: "\f14a"; | |
| $icon-check-square-o: "\f046"; | |
| $icon-chevron-circle-down: "\f13a"; | |
| $icon-chevron-circle-left: "\f137"; | |
| $icon-chevron-circle-right: "\f138"; | |
| $icon-chevron-circle-up: "\f139"; | |
| $icon-chevron-down: "\f078"; | |
| $icon-chevron-left: "\f053"; | |
| $icon-chevron-right: "\f054"; | |
| $icon-chevron-up: "\f077"; | |
| $icon-child: "\f1ae"; | |
| $icon-chrome: "\f268"; | |
| $icon-circle: "\f111"; | |
| $icon-circle-o: "\f10c"; | |
| $icon-circle-o-notch: "\f1ce"; | |
| $icon-circle-thin: "\f1db"; | |
| $icon-clipboard: "\f0ea"; | |
| $icon-clock-o: "\f017"; | |
| $icon-clone: "\f24d"; | |
| $icon-close: "\f00d"; | |
| $icon-cloud: "\f0c2"; | |
| $icon-cloud-download: "\f0ed"; | |
| $icon-cloud-upload: "\f0ee"; | |
| $icon-cny: "\f157"; | |
| $icon-code: "\f121"; | |
| $icon-code-fork: "\f126"; | |
| $icon-codepen: "\f1cb"; | |
| $icon-codiepie: "\f284"; | |
| $icon-coffee: "\f0f4"; | |
| $icon-cog: "\f013"; | |
| $icon-cogs: "\f085"; | |
| $icon-columns: "\f0db"; | |
| $icon-comment: "\f075"; | |
| $icon-comment-o: "\f0e5"; | |
| $icon-commenting: "\f27a"; | |
| $icon-commenting-o: "\f27b"; | |
| $icon-comments: "\f086"; | |
| $icon-comments-o: "\f0e6"; | |
| $icon-compass: "\f14e"; | |
| $icon-compress: "\f066"; | |
| $icon-connectdevelop: "\f20e"; | |
| $icon-contao: "\f26d"; | |
| $icon-copy: "\f0c5"; | |
| $icon-copyright: "\f1f9"; | |
| $icon-creative-commons: "\f25e"; | |
| $icon-credit-card: "\f09d"; | |
| $icon-credit-card-alt: "\f283"; | |
| $icon-crop: "\f125"; | |
| $icon-crosshairs: "\f05b"; | |
| $icon-css3: "\f13c"; | |
| $icon-cube: "\f1b2"; | |
| $icon-cubes: "\f1b3"; | |
| $icon-cut: "\f0c4"; | |
| $icon-cutlery: "\f0f5"; | |
| $icon-dashboard: "\f0e4"; | |
| $icon-dashcube: "\f210"; | |
| $icon-database: "\f1c0"; | |
| $icon-deaf: "\f2a4"; | |
| $icon-deafness: "\f2a4"; | |
| $icon-dedent: "\f03b"; | |
| $icon-delicious: "\f1a5"; | |
| $icon-desktop: "\f108"; | |
| $icon-deviantart: "\f1bd"; | |
| $icon-diamond: "\f219"; | |
| $icon-digg: "\f1a6"; | |
| $icon-dollar: "\f155"; | |
| $icon-dot-circle-o: "\f192"; | |
| $icon-download: "\f019"; | |
| $icon-dribbble: "\f17d"; | |
| $icon-drivers-license: "\f2c2"; | |
| $icon-drivers-license-o: "\f2c3"; | |
| $icon-dropbox: "\f16b"; | |
| $icon-drupal: "\f1a9"; | |
| $icon-edge: "\f282"; | |
| $icon-edit: "\f044"; | |
| $icon-eercast: "\f2da"; | |
| $icon-eject: "\f052"; | |
| $icon-ellipsis-h: "\f141"; | |
| $icon-ellipsis-v: "\f142"; | |
| $icon-empire: "\f1d1"; | |
| $icon-envelope: "\f0e0"; | |
| $icon-envelope-o: "\f003"; | |
| $icon-envelope-open: "\f2b6"; | |
| $icon-envelope-open-o: "\f2b7"; | |
| $icon-envelope-square: "\f199"; | |
| $icon-envira: "\f299"; | |
| $icon-eraser: "\f12d"; | |
| $icon-etsy: "\f2d7"; | |
| $icon-eur: "\f153"; | |
| $icon-euro: "\f153"; | |
| $icon-exchange: "\f0ec"; | |
| $icon-exclamation: "\f12a"; | |
| $icon-exclamation-circle: "\f06a"; | |
| $icon-exclamation-triangle: "\f071"; | |
| $icon-expand: "\f065"; | |
| $icon-expeditedssl: "\f23e"; | |
| $icon-external-link: "\f08e"; | |
| $icon-external-link-square: "\f14c"; | |
| $icon-eye: "\f06e"; | |
| $icon-eye-slash: "\f070"; | |
| $icon-eyedropper: "\f1fb"; | |
| $icon-fa: "\f2b4"; | |
| $icon-facebook: "\f09a"; | |
| $icon-facebook-f: "\f09a"; | |
| $icon-facebook-official: "\f230"; | |
| $icon-facebook-square: "\f082"; | |
| $icon-fast-backward: "\f049"; | |
| $icon-fast-forward: "\f050"; | |
| $icon-fax: "\f1ac"; | |
| $icon-feed: "\f09e"; | |
| $icon-female: "\f182"; | |
| $icon-fighter-jet: "\f0fb"; | |
| $icon-file: "\f15b"; | |
| $icon-file-archive-o: "\f1c6"; | |
| $icon-file-audio-o: "\f1c7"; | |
| $icon-file-code-o: "\f1c9"; | |
| $icon-file-excel-o: "\f1c3"; | |
| $icon-file-image-o: "\f1c5"; | |
| $icon-file-movie-o: "\f1c8"; | |
| $icon-file-o: "\f016"; | |
| $icon-file-pdf-o: "\f1c1"; | |
| $icon-file-photo-o: "\f1c5"; | |
| $icon-file-picture-o: "\f1c5"; | |
| $icon-file-powerpoint-o: "\f1c4"; | |
| $icon-file-sound-o: "\f1c7"; | |
| $icon-file-text: "\f15c"; | |
| $icon-file-text-o: "\f0f6"; | |
| $icon-file-video-o: "\f1c8"; | |
| $icon-file-word-o: "\f1c2"; | |
| $icon-file-zip-o: "\f1c6"; | |
| $icon-files-o: "\f0c5"; | |
| $icon-film: "\f008"; | |
| $icon-filter: "\f0b0"; | |
| $icon-fire: "\f06d"; | |
| $icon-fire-extinguisher: "\f134"; | |
| $icon-firefox: "\f269"; | |
| $icon-first-order: "\f2b0"; | |
| $icon-flag: "\f024"; | |
| $icon-flag-checkered: "\f11e"; | |
| $icon-flag-o: "\f11d"; | |
| $icon-flash: "\f0e7"; | |
| $icon-flask: "\f0c3"; | |
| $icon-flickr: "\f16e"; | |
| $icon-floppy-o: "\f0c7"; | |
| $icon-folder: "\f07b"; | |
| $icon-folder-o: "\f114"; | |
| $icon-folder-open: "\f07c"; | |
| $icon-folder-open-o: "\f115"; | |
| $icon-font: "\f031"; | |
| $icon-font-awesome: "\f2b4"; | |
| $icon-fonticons: "\f280"; | |
| $icon-fort-awesome: "\f286"; | |
| $icon-forumbee: "\f211"; | |
| $icon-forward: "\f04e"; | |
| $icon-foursquare: "\f180"; | |
| $icon-free-code-camp: "\f2c5"; | |
| $icon-frown-o: "\f119"; | |
| $icon-futbol-o: "\f1e3"; | |
| $icon-gamepad: "\f11b"; | |
| $icon-gavel: "\f0e3"; | |
| $icon-gbp: "\f154"; | |
| $icon-ge: "\f1d1"; | |
| $icon-gear: "\f013"; | |
| $icon-gears: "\f085"; | |
| $icon-genderless: "\f22d"; | |
| $icon-get-pocket: "\f265"; | |
| $icon-gg: "\f260"; | |
| $icon-gg-circle: "\f261"; | |
| $icon-gift: "\f06b"; | |
| $icon-git: "\f1d3"; | |
| $icon-git-square: "\f1d2"; | |
| $icon-github: "\f09b"; | |
| $icon-github-alt: "\f113"; | |
| $icon-github-square: "\f092"; | |
| $icon-gitlab: "\f296"; | |
| $icon-gittip: "\f184"; | |
| $icon-glass: "\f000"; | |
| $icon-glide: "\f2a5"; | |
| $icon-glide-g: "\f2a6"; | |
| $icon-globe: "\f0ac"; | |
| $icon-google: "\f1a0"; | |
| $icon-google-plus: "\f0d5"; | |
| $icon-google-plus-circle: "\f2b3"; | |
| $icon-google-plus-official: "\f2b3"; | |
| $icon-google-plus-square: "\f0d4"; | |
| $icon-google-wallet: "\f1ee"; | |
| $icon-graduation-cap: "\f19d"; | |
| $icon-gratipay: "\f184"; | |
| $icon-grav: "\f2d6"; | |
| $icon-group: "\f0c0"; | |
| $icon-h-square: "\f0fd"; | |
| $icon-hacker-news: "\f1d4"; | |
| $icon-hand-grab-o: "\f255"; | |
| $icon-hand-lizard-o: "\f258"; | |
| $icon-hand-o-down: "\f0a7"; | |
| $icon-hand-o-left: "\f0a5"; | |
| $icon-hand-o-right: "\f0a4"; | |
| $icon-hand-o-up: "\f0a6"; | |
| $icon-hand-paper-o: "\f256"; | |
| $icon-hand-peace-o: "\f25b"; | |
| $icon-hand-pointer-o: "\f25a"; | |
| $icon-hand-rock-o: "\f255"; | |
| $icon-hand-scissors-o: "\f257"; | |
| $icon-hand-spock-o: "\f259"; | |
| $icon-hand-stop-o: "\f256"; | |
| $icon-handshake-o: "\f2b5"; | |
| $icon-hard-of-hearing: "\f2a4"; | |
| $icon-hashtag: "\f292"; | |
| $icon-hdd-o: "\f0a0"; | |
| $icon-header: "\f1dc"; | |
| $icon-headphones: "\f025"; | |
| $icon-heart: "\f004"; | |
| $icon-heart-o: "\f08a"; | |
| $icon-heartbeat: "\f21e"; | |
| $icon-history: "\f1da"; | |
| $icon-home: "\f015"; | |
| $icon-hospital-o: "\f0f8"; | |
| $icon-hotel: "\f236"; | |
| $icon-hourglass: "\f254"; | |
| $icon-hourglass-1: "\f251"; | |
| $icon-hourglass-2: "\f252"; | |
| $icon-hourglass-3: "\f253"; | |
| $icon-hourglass-end: "\f253"; | |
| $icon-hourglass-half: "\f252"; | |
| $icon-hourglass-o: "\f250"; | |
| $icon-hourglass-start: "\f251"; | |
| $icon-houzz: "\f27c"; | |
| $icon-html5: "\f13b"; | |
| $icon-i-cursor: "\f246"; | |
| $icon-id-badge: "\f2c1"; | |
| $icon-id-card: "\f2c2"; | |
| $icon-id-card-o: "\f2c3"; | |
| $icon-ils: "\f20b"; | |
| $icon-image: "\f03e"; | |
| $icon-imdb: "\f2d8"; | |
| $icon-inbox: "\f01c"; | |
| $icon-indent: "\f03c"; | |
| $icon-industry: "\f275"; | |
| $icon-info: "\f129"; | |
| $icon-info-circle: "\f05a"; | |
| $icon-inr: "\f156"; | |
| $icon-instagram: "\f16d"; | |
| $icon-institution: "\f19c"; | |
| $icon-internet-explorer: "\f26b"; | |
| $icon-intersex: "\f224"; | |
| $icon-ioxhost: "\f208"; | |
| $icon-italic: "\f033"; | |
| $icon-joomla: "\f1aa"; | |
| $icon-jpy: "\f157"; | |
| $icon-jsfiddle: "\f1cc"; | |
| $icon-key: "\f084"; | |
| $icon-keyboard-o: "\f11c"; | |
| $icon-krw: "\f159"; | |
| $icon-language: "\f1ab"; | |
| $icon-laptop: "\f109"; | |
| $icon-lastfm: "\f202"; | |
| $icon-lastfm-square: "\f203"; | |
| $icon-leaf: "\f06c"; | |
| $icon-leanpub: "\f212"; | |
| $icon-legal: "\f0e3"; | |
| $icon-lemon-o: "\f094"; | |
| $icon-level-down: "\f149"; | |
| $icon-level-up: "\f148"; | |
| $icon-life-bouy: "\f1cd"; | |
| $icon-life-buoy: "\f1cd"; | |
| $icon-life-ring: "\f1cd"; | |
| $icon-life-saver: "\f1cd"; | |
| $icon-lightbulb-o: "\f0eb"; | |
| $icon-line-chart: "\f201"; | |
| $icon-link: "\f0c1"; | |
| $icon-linkedin: "\f0e1"; | |
| $icon-linkedin-square: "\f08c"; | |
| $icon-linode: "\f2b8"; | |
| $icon-linux: "\f17c"; | |
| $icon-list: "\f03a"; | |
| $icon-list-alt: "\f022"; | |
| $icon-list-ol: "\f0cb"; | |
| $icon-list-ul: "\f0ca"; | |
| $icon-location-arrow: "\f124"; | |
| $icon-lock: "\f023"; | |
| $icon-long-arrow-down: "\f175"; | |
| $icon-long-arrow-left: "\f177"; | |
| $icon-long-arrow-right: "\f178"; | |
| $icon-long-arrow-up: "\f176"; | |
| $icon-low-vision: "\f2a8"; | |
| $icon-magic: "\f0d0"; | |
| $icon-magnet: "\f076"; | |
| $icon-mail-forward: "\f064"; | |
| $icon-mail-reply: "\f112"; | |
| $icon-mail-reply-all: "\f122"; | |
| $icon-male: "\f183"; | |
| $icon-map: "\f279"; | |
| $icon-map-marker: "\f041"; | |
| $icon-map-o: "\f278"; | |
| $icon-map-pin: "\f276"; | |
| $icon-map-signs: "\f277"; | |
| $icon-mars: "\f222"; | |
| $icon-mars-double: "\f227"; | |
| $icon-mars-stroke: "\f229"; | |
| $icon-mars-stroke-h: "\f22b"; | |
| $icon-mars-stroke-v: "\f22a"; | |
| $icon-maxcdn: "\f136"; | |
| $icon-meanpath: "\f20c"; | |
| $icon-medium: "\f23a"; | |
| $icon-medkit: "\f0fa"; | |
| $icon-meetup: "\f2e0"; | |
| $icon-meh-o: "\f11a"; | |
| $icon-mercury: "\f223"; | |
| $icon-microchip: "\f2db"; | |
| $icon-microphone: "\f130"; | |
| $icon-microphone-slash: "\f131"; | |
| $icon-minus: "\f068"; | |
| $icon-minus-circle: "\f056"; | |
| $icon-minus-square: "\f146"; | |
| $icon-minus-square-o: "\f147"; | |
| $icon-mixcloud: "\f289"; | |
| $icon-mobile: "\f10b"; | |
| $icon-mobile-phone: "\f10b"; | |
| $icon-modx: "\f285"; | |
| $icon-money: "\f0d6"; | |
| $icon-moon-o: "\f186"; | |
| $icon-mortar-board: "\f19d"; | |
| $icon-motorcycle: "\f21c"; | |
| $icon-mouse-pointer: "\f245"; | |
| $icon-music: "\f001"; | |
| $icon-navicon: "\f0c9"; | |
| $icon-neuter: "\f22c"; | |
| $icon-newspaper-o: "\f1ea"; | |
| $icon-object-group: "\f247"; | |
| $icon-object-ungroup: "\f248"; | |
| $icon-odnoklassniki: "\f263"; | |
| $icon-odnoklassniki-square: "\f264"; | |
| $icon-opencart: "\f23d"; | |
| $icon-openid: "\f19b"; | |
| $icon-opera: "\f26a"; | |
| $icon-optin-monster: "\f23c"; | |
| $icon-outdent: "\f03b"; | |
| $icon-pagelines: "\f18c"; | |
| $icon-paint-brush: "\f1fc"; | |
| $icon-paper-plane: "\f1d8"; | |
| $icon-paper-plane-o: "\f1d9"; | |
| $icon-paperclip: "\f0c6"; | |
| $icon-paragraph: "\f1dd"; | |
| $icon-paste: "\f0ea"; | |
| $icon-pause: "\f04c"; | |
| $icon-pause-circle: "\f28b"; | |
| $icon-pause-circle-o: "\f28c"; | |
| $icon-paw: "\f1b0"; | |
| $icon-paypal: "\f1ed"; | |
| $icon-pencil: "\f040"; | |
| $icon-pencil-square: "\f14b"; | |
| $icon-pencil-square-o: "\f044"; | |
| $icon-percent: "\f295"; | |
| $icon-phone: "\f095"; | |
| $icon-phone-square: "\f098"; | |
| $icon-photo: "\f03e"; | |
| $icon-picture-o: "\f03e"; | |
| $icon-pie-chart: "\f200"; | |
| $icon-pied-piper: "\f2ae"; | |
| $icon-pied-piper-alt: "\f1a8"; | |
| $icon-pied-piper-pp: "\f1a7"; | |
| $icon-pinterest: "\f0d2"; | |
| $icon-pinterest-p: "\f231"; | |
| $icon-pinterest-square: "\f0d3"; | |
| $icon-plane: "\f072"; | |
| $icon-play: "\f04b"; | |
| $icon-play-circle: "\f144"; | |
| $icon-play-circle-o: "\f01d"; | |
| $icon-plug: "\f1e6"; | |
| $icon-plus: "\f067"; | |
| $icon-plus-circle: "\f055"; | |
| $icon-plus-square: "\f0fe"; | |
| $icon-plus-square-o: "\f196"; | |
| $icon-podcast: "\f2ce"; | |
| $icon-power-off: "\f011"; | |
| $icon-print: "\f02f"; | |
| $icon-product-hunt: "\f288"; | |
| $icon-puzzle-piece: "\f12e"; | |
| $icon-qq: "\f1d6"; | |
| $icon-qrcode: "\f029"; | |
| $icon-question: "\f128"; | |
| $icon-question-circle: "\f059"; | |
| $icon-question-circle-o: "\f29c"; | |
| $icon-quora: "\f2c4"; | |
| $icon-quote-left: "\f10d"; | |
| $icon-quote-right: "\f10e"; | |
| $icon-ra: "\f1d0"; | |
| $icon-random: "\f074"; | |
| $icon-ravelry: "\f2d9"; | |
| $icon-rebel: "\f1d0"; | |
| $icon-recycle: "\f1b8"; | |
| $icon-reddit: "\f1a1"; | |
| $icon-reddit-alien: "\f281"; | |
| $icon-reddit-square: "\f1a2"; | |
| $icon-refresh: "\f021"; | |
| $icon-registered: "\f25d"; | |
| $icon-remove: "\f00d"; | |
| $icon-renren: "\f18b"; | |
| $icon-reorder: "\f0c9"; | |
| $icon-repeat: "\f01e"; | |
| $icon-reply: "\f112"; | |
| $icon-reply-all: "\f122"; | |
| $icon-resistance: "\f1d0"; | |
| $icon-retweet: "\f079"; | |
| $icon-rmb: "\f157"; | |
| $icon-road: "\f018"; | |
| $icon-rocket: "\f135"; | |
| $icon-rotate-left: "\f0e2"; | |
| $icon-rotate-right: "\f01e"; | |
| $icon-rouble: "\f158"; | |
| $icon-rss: "\f09e"; | |
| $icon-rss-square: "\f143"; | |
| $icon-rub: "\f158"; | |
| $icon-ruble: "\f158"; | |
| $icon-rupee: "\f156"; | |
| $icon-s15: "\f2cd"; | |
| $icon-safari: "\f267"; | |
| $icon-save: "\f0c7"; | |
| $icon-scissors: "\f0c4"; | |
| $icon-scribd: "\f28a"; | |
| $icon-search: "\f002"; | |
| $icon-search-minus: "\f010"; | |
| $icon-search-plus: "\f00e"; | |
| $icon-sellsy: "\f213"; | |
| $icon-send: "\f1d8"; | |
| $icon-send-o: "\f1d9"; | |
| $icon-server: "\f233"; | |
| $icon-share: "\f064"; | |
| $icon-share-alt: "\f1e0"; | |
| $icon-share-alt-square: "\f1e1"; | |
| $icon-share-square: "\f14d"; | |
| $icon-share-square-o: "\f045"; | |
| $icon-shekel: "\f20b"; | |
| $icon-sheqel: "\f20b"; | |
| $icon-shield: "\f132"; | |
| $icon-ship: "\f21a"; | |
| $icon-shirtsinbulk: "\f214"; | |
| $icon-shopping-bag: "\f290"; | |
| $icon-shopping-basket: "\f291"; | |
| $icon-shopping-cart: "\f07a"; | |
| $icon-shower: "\f2cc"; | |
| $icon-sign-in: "\f090"; | |
| $icon-sign-language: "\f2a7"; | |
| $icon-sign-out: "\f08b"; | |
| $icon-signal: "\f012"; | |
| $icon-signing: "\f2a7"; | |
| $icon-simplybuilt: "\f215"; | |
| $icon-sitemap: "\f0e8"; | |
| $icon-skyatlas: "\f216"; | |
| $icon-skype: "\f17e"; | |
| $icon-slack: "\f198"; | |
| $icon-sliders: "\f1de"; | |
| $icon-slideshare: "\f1e7"; | |
| $icon-smile-o: "\f118"; | |
| $icon-snapchat: "\f2ab"; | |
| $icon-snapchat-ghost: "\f2ac"; | |
| $icon-snapchat-square: "\f2ad"; | |
| $icon-snowflake-o: "\f2dc"; | |
| $icon-soccer-ball-o: "\f1e3"; | |
| $icon-sort: "\f0dc"; | |
| $icon-sort-alpha-asc: "\f15d"; | |
| $icon-sort-alpha-desc: "\f15e"; | |
| $icon-sort-amount-asc: "\f160"; | |
| $icon-sort-amount-desc: "\f161"; | |
| $icon-sort-asc: "\f0de"; | |
| $icon-sort-desc: "\f0dd"; | |
| $icon-sort-down: "\f0dd"; | |
| $icon-sort-numeric-asc: "\f162"; | |
| $icon-sort-numeric-desc: "\f163"; | |
| $icon-sort-up: "\f0de"; | |
| $icon-soundcloud: "\f1be"; | |
| $icon-space-shuttle: "\f197"; | |
| $icon-spinner: "\f110"; | |
| $icon-spoon: "\f1b1"; | |
| $icon-spotify: "\f1bc"; | |
| $icon-square: "\f0c8"; | |
| $icon-square-o: "\f096"; | |
| $icon-stack-exchange: "\f18d"; | |
| $icon-stack-overflow: "\f16c"; | |
| $icon-star: "\f005"; | |
| $icon-star-half: "\f089"; | |
| $icon-star-half-empty: "\f123"; | |
| $icon-star-half-full: "\f123"; | |
| $icon-star-half-o: "\f123"; | |
| $icon-star-o: "\f006"; | |
| $icon-steam: "\f1b6"; | |
| $icon-steam-square: "\f1b7"; | |
| $icon-step-backward: "\f048"; | |
| $icon-step-forward: "\f051"; | |
| $icon-stethoscope: "\f0f1"; | |
| $icon-sticky-note: "\f249"; | |
| $icon-sticky-note-o: "\f24a"; | |
| $icon-stop: "\f04d"; | |
| $icon-stop-circle: "\f28d"; | |
| $icon-stop-circle-o: "\f28e"; | |
| $icon-street-view: "\f21d"; | |
| $icon-strikethrough: "\f0cc"; | |
| $icon-stumbleupon: "\f1a4"; | |
| $icon-stumbleupon-circle: "\f1a3"; | |
| $icon-subscript: "\f12c"; | |
| $icon-subway: "\f239"; | |
| $icon-suitcase: "\f0f2"; | |
| $icon-sun-o: "\f185"; | |
| $icon-superpowers: "\f2dd"; | |
| $icon-superscript: "\f12b"; | |
| $icon-support: "\f1cd"; | |
| $icon-table: "\f0ce"; | |
| $icon-tablet: "\f10a"; | |
| $icon-tachometer: "\f0e4"; | |
| $icon-tag: "\f02b"; | |
| $icon-tags: "\f02c"; | |
| $icon-tasks: "\f0ae"; | |
| $icon-taxi: "\f1ba"; | |
| $icon-telegram: "\f2c6"; | |
| $icon-television: "\f26c"; | |
| $icon-tencent-weibo: "\f1d5"; | |
| $icon-terminal: "\f120"; | |
| $icon-text-height: "\f034"; | |
| $icon-text-width: "\f035"; | |
| $icon-th: "\f00a"; | |
| $icon-th-large: "\f009"; | |
| $icon-th-list: "\f00b"; | |
| $icon-themeisle: "\f2b2"; | |
| $icon-thermometer: "\f2c7"; | |
| $icon-thermometer-0: "\f2cb"; | |
| $icon-thermometer-1: "\f2ca"; | |
| $icon-thermometer-2: "\f2c9"; | |
| $icon-thermometer-3: "\f2c8"; | |
| $icon-thermometer-4: "\f2c7"; | |
| $icon-thermometer-empty: "\f2cb"; | |
| $icon-thermometer-full: "\f2c7"; | |
| $icon-thermometer-half: "\f2c9"; | |
| $icon-thermometer-quarter: "\f2ca"; | |
| $icon-thermometer-three-quarters: "\f2c8"; | |
| $icon-thumb-tack: "\f08d"; | |
| $icon-thumbs-down: "\f165"; | |
| $icon-thumbs-o-down: "\f088"; | |
| $icon-thumbs-o-up: "\f087"; | |
| $icon-thumbs-up: "\f164"; | |
| $icon-ticket: "\f145"; | |
| $icon-times: "\f00d"; | |
| $icon-times-circle: "\f057"; | |
| $icon-times-circle-o: "\f05c"; | |
| $icon-times-rectangle: "\f2d3"; | |
| $icon-times-rectangle-o: "\f2d4"; | |
| $icon-tint: "\f043"; | |
| $icon-toggle-down: "\f150"; | |
| $icon-toggle-left: "\f191"; | |
| $icon-toggle-off: "\f204"; | |
| $icon-toggle-on: "\f205"; | |
| $icon-toggle-right: "\f152"; | |
| $icon-toggle-up: "\f151"; | |
| $icon-trademark: "\f25c"; | |
| $icon-train: "\f238"; | |
| $icon-transgender: "\f224"; | |
| $icon-transgender-alt: "\f225"; | |
| $icon-trash: "\f1f8"; | |
| $icon-trash-o: "\f014"; | |
| $icon-tree: "\f1bb"; | |
| $icon-trello: "\f181"; | |
| $icon-tripadvisor: "\f262"; | |
| $icon-trophy: "\f091"; | |
| $icon-truck: "\f0d1"; | |
| $icon-try: "\f195"; | |
| $icon-tty: "\f1e4"; | |
| $icon-tumblr: "\f173"; | |
| $icon-tumblr-square: "\f174"; | |
| $icon-turkish-lira: "\f195"; | |
| $icon-tv: "\f26c"; | |
| $icon-twitch: "\f1e8"; | |
| $icon-twitter: "\f099"; | |
| $icon-twitter-square: "\f081"; | |
| $icon-umbrella: "\f0e9"; | |
| $icon-underline: "\f0cd"; | |
| $icon-undo: "\f0e2"; | |
| $icon-universal-access: "\f29a"; | |
| $icon-university: "\f19c"; | |
| $icon-unlink: "\f127"; | |
| $icon-unlock: "\f09c"; | |
| $icon-unlock-alt: "\f13e"; | |
| $icon-unsorted: "\f0dc"; | |
| $icon-upload: "\f093"; | |
| $icon-usb: "\f287"; | |
| $icon-usd: "\f155"; | |
| $icon-user: "\f007"; | |
| $icon-user-circle: "\f2bd"; | |
| $icon-user-circle-o: "\f2be"; | |
| $icon-user-md: "\f0f0"; | |
| $icon-user-o: "\f2c0"; | |
| $icon-user-plus: "\f234"; | |
| $icon-user-secret: "\f21b"; | |
| $icon-user-times: "\f235"; | |
| $icon-users: "\f0c0"; | |
| $icon-vcard: "\f2bb"; | |
| $icon-vcard-o: "\f2bc"; | |
| $icon-venus: "\f221"; | |
| $icon-venus-double: "\f226"; | |
| $icon-venus-mars: "\f228"; | |
| $icon-viacoin: "\f237"; | |
| $icon-viadeo: "\f2a9"; | |
| $icon-viadeo-square: "\f2aa"; | |
| $icon-video-camera: "\f03d"; | |
| $icon-vimeo: "\f27d"; | |
| $icon-vimeo-square: "\f194"; | |
| $icon-vine: "\f1ca"; | |
| $icon-vk: "\f189"; | |
| $icon-volume-control-phone: "\f2a0"; | |
| $icon-volume-down: "\f027"; | |
| $icon-volume-off: "\f026"; | |
| $icon-volume-up: "\f028"; | |
| $icon-warning: "\f071"; | |
| $icon-wechat: "\f1d7"; | |
| $icon-weibo: "\f18a"; | |
| $icon-weixin: "\f1d7"; | |
| $icon-whatsapp: "\f232"; | |
| $icon-wheelchair: "\f193"; | |
| $icon-wheelchair-alt: "\f29b"; | |
| $icon-wifi: "\f1eb"; | |
| $icon-wikipedia-w: "\f266"; | |
| $icon-window-close: "\f2d3"; | |
| $icon-window-close-o: "\f2d4"; | |
| $icon-window-maximize: "\f2d0"; | |
| $icon-window-minimize: "\f2d1"; | |
| $icon-window-restore: "\f2d2"; | |
| $icon-windows: "\f17a"; | |
| $icon-won: "\f159"; | |
| $icon-wordpress: "\f19a"; | |
| $icon-wpbeginner: "\f297"; | |
| $icon-wpexplorer: "\f2de"; | |
| $icon-wpforms: "\f298"; | |
| $icon-wrench: "\f0ad"; | |
| $icon-xing: "\f168"; | |
| $icon-xing-square: "\f169"; | |
| $icon-y-combinator: "\f23b"; | |
| $icon-y-combinator-square: "\f1d4"; | |
| $icon-yahoo: "\f19e"; | |
| $icon-yc: "\f23b"; | |
| $icon-yc-square: "\f1d4"; | |
| $icon-yelp: "\f1e9"; | |
| $icon-yen: "\f157"; | |
| $icon-yoast: "\f2b1"; | |
| $icon-youtube: "\f167"; | |
| $icon-youtube-play: "\f16a"; | |
| $icon-youtube-square: "\f166"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please see the slightly updated CodePen demonstration version of this Gist: https://codepen.io/amcgregor/pen/yWgMPQ?editors=1100#0