Skip to content

Instantly share code, notes, and snippets.

@MaxLynam
Created May 13, 2014 07:39
Show Gist options
  • Save MaxLynam/e07a47ec38345cd42c9a to your computer and use it in GitHub Desktop.
Save MaxLynam/e07a47ec38345cd42c9a to your computer and use it in GitHub Desktop.
Flat UI Icons & Flat UI Social Icons
@font-face {
font-family: "Flat-UI-Icons";
src: url("../fonts/Flat-UI-Icons.eot");
src: url("../fonts/Flat-UI-Icons.eot?#iefix") format("embedded-opentype"), url("../fonts/Flat-UI-Icons.woff") format("woff"), url("../fonts/Flat-UI-Icons.ttf") format("truetype"), url("../fonts/Flat-UI-Icons.svg#Flat-UI-Icons") format("svg");
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Flat-UI-Icons';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="fui-"] {
*/
.fui-triangle-up, .fui-triangle-up-small, .fui-triangle-right-large, .fui-triangle-left-large, .fui-triangle-down, .fui-info, .fui-alert, .fui-question, .fui-window, .fui-windows, .fui-arrow-right, .fui-arrow-left, .fui-loop, .fui-cmd, .fui-mic, .fui-triangle-down-small, .fui-check-inverted, .fui-heart, .fui-location, .fui-plus, .fui-check, .fui-cross, .fui-list, .fui-new, .fui-video, .fui-photo, .fui-volume, .fui-time, .fui-eye, .fui-chat, .fui-home, .fui-upload, .fui-search, .fui-user, .fui-mail, .fui-lock, .fui-power, .fui-star, .fui-calendar, .fui-gear, .fui-book, .fui-exit, .fui-trash, .fui-folder, .fui-bubble, .fui-cross-inverted, .fui-plus-inverted, .fui-export, .fui-radio-unchecked, .fui-radio-checked, .fui-checkbox-unchecked, .fui-checkbox-checked, .fui-flat, .fui-calendar-solid, .fui-star-2, .fui-credit-card, .fui-clip, .fui-link, .fui-pause, .fui-play, .fui-tag, .fui-document, .fui-image, .fui-facebook, .fui-youtube, .fui-vimeo, .fui-twitter, .fui-stumbleupon, .fui-spotify, .fui-skype, .fui-pinterest, .fui-path, .fui-myspace, .fui-linkedin, .fui-googleplus, .fui-dribbble, .fui-blogger, .fui-behance, .fui-list-thumbnailed, .fui-list-small-thumbnails, .fui-list-numbered, .fui-list-large-thumbnails, .fui-list-columned, .fui-list-bulleted {
display: inline-block;
font-family: 'Flat-UI-Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.fui-triangle-up:before {
content: "\e000";
}
.fui-triangle-up-small:before {
content: "\e001";
}
.fui-triangle-right-large:before {
content: "\e002";
}
.fui-triangle-left-large:before {
content: "\e003";
}
.fui-triangle-down:before {
content: "\e004";
}
.fui-info:before {
content: "\e016";
}
.fui-alert:before {
content: "\e017";
}
.fui-question:before {
content: "\e018";
}
.fui-window:before {
content: "\e019";
}
.fui-windows:before {
content: "\e01a";
}
.fui-arrow-right:before {
content: "\e02c";
}
.fui-arrow-left:before {
content: "\e02d";
}
.fui-loop:before {
content: "\e02e";
}
.fui-cmd:before {
content: "\e02f";
}
.fui-mic:before {
content: "\e030";
}
.fui-triangle-down-small:before {
content: "\e005";
}
.fui-check-inverted:before {
content: "\e006";
}
.fui-heart:before {
content: "\e007";
}
.fui-location:before {
content: "\e008";
}
.fui-plus:before {
content: "\e009";
}
.fui-check:before {
content: "\e00a";
}
.fui-cross:before {
content: "\e00b";
}
.fui-list:before {
content: "\e00c";
}
.fui-new:before {
content: "\e00d";
}
.fui-video:before {
content: "\e00e";
}
.fui-photo:before {
content: "\e00f";
}
.fui-volume:before {
content: "\e010";
}
.fui-time:before {
content: "\e011";
}
.fui-eye:before {
content: "\e012";
}
.fui-chat:before {
content: "\e013";
}
.fui-home:before {
content: "\e015";
}
.fui-upload:before {
content: "\e01b";
}
.fui-search:before {
content: "\e01c";
}
.fui-user:before {
content: "\e01d";
}
.fui-mail:before {
content: "\e01e";
}
.fui-lock:before {
content: "\e01f";
}
.fui-power:before {
content: "\e020";
}
.fui-star:before {
content: "\e021";
}
.fui-calendar:before {
content: "\e023";
}
.fui-gear:before {
content: "\e024";
}
.fui-book:before {
content: "\e025";
}
.fui-exit:before {
content: "\e026";
}
.fui-trash:before {
content: "\e027";
}
.fui-folder:before {
content: "\e028";
}
.fui-bubble:before {
content: "\e029";
}
.fui-cross-inverted:before {
content: "\e02a";
}
.fui-plus-inverted:before {
content: "\e031";
}
.fui-export:before {
content: "\e014";
}
.fui-radio-unchecked:before {
content: "\e02b";
}
.fui-radio-checked:before {
content: "\e032";
}
.fui-checkbox-unchecked:before {
content: "\e033";
}
.fui-checkbox-checked:before {
content: "\e034";
}
.fui-flat:before {
content: "\e035";
}
.fui-calendar-solid:before {
content: "\e022";
}
.fui-star-2:before {
content: "\e036";
}
.fui-credit-card:before {
content: "\e037";
}
.fui-clip:before {
content: "\e038";
}
.fui-link:before {
content: "\e039";
}
.fui-pause:before {
content: "\e03b";
}
.fui-play:before {
content: "\e03c";
}
.fui-tag:before {
content: "\e03d";
}
.fui-document:before {
content: "\e03e";
}
.fui-image:before {
content: "\e03a";
}
.fui-facebook:before {
content: "\e03f";
}
.fui-youtube:before {
content: "\e040";
}
.fui-vimeo:before {
content: "\e041";
}
.fui-twitter:before {
content: "\e042";
}
.fui-stumbleupon:before {
content: "\e043";
}
.fui-spotify:before {
content: "\e044";
}
.fui-skype:before {
content: "\e045";
}
.fui-pinterest:before {
content: "\e046";
}
.fui-path:before {
content: "\e047";
}
.fui-myspace:before {
content: "\e048";
}
.fui-linkedin:before {
content: "\e049";
}
.fui-googleplus:before {
content: "\e04a";
}
.fui-dribbble:before {
content: "\e04c";
}
.fui-blogger:before {
content: "\e04d";
}
.fui-behance:before {
content: "\e04e";
}
.fui-list-thumbnailed:before {
content: "\e04b";
}
.fui-list-small-thumbnails:before {
content: "\e04f";
}
.fui-list-numbered:before {
content: "\e050";
}
.fui-list-large-thumbnails:before {
content: "\e051";
}
.fui-list-columned:before {
content: "\e052";
}
.fui-list-bulleted:before {
content: "\e053";
}
@font-face {
font-family: "Flat-UI-Social-Icons";
src: url("../fonts/Flat-UI-Social-Icons.eot");
src: url("../fonts/Flat-UI-Social-Icons.eot?#iefix") format("embedded-opentype"), url("../fonts/Flat-UI-Social-Icons.woff") format("woff"), url("../fonts/Flat-UI-Social-Icons.ttf") format("truetype"), url("../fonts/Flat-UI-Social-Icons.svg#Flat-UI-Social-Icons") format("svg");
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Flat-UI-Social-Icons';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="fui-"] {
*/
.fui-youtube, .fui-vimeo, .fui-twitter, .fui-stumbleupon, .fui-spotify, .fui-skype, .fui-pinterest, .fui-path, .fui-myspace, .fui-linkedin, .fui-dribbble, .fui-blogger, .fui-behance, .fui-googleplus, .fui-facebook {
display: inline-block;
font-family: 'Flat-UI-Social-Icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
}
.fui-youtube:before {
content: "\e000";
}
.fui-vimeo:before {
content: "\e001";
}
.fui-twitter:before {
content: "\e002";
}
.fui-stumbleupon:before {
content: "\e003";
}
.fui-spotify:before {
content: "\e004";
}
.fui-skype:before {
content: "\e005";
}
.fui-pinterest:before {
content: "\e006";
}
.fui-path:before {
content: "\e007";
}
.fui-myspace:before {
content: "\e008";
}
.fui-linkedin:before {
content: "\e009";
}
.fui-dribbble:before {
content: "\e00c";
}
.fui-blogger:before {
content: "\e00d";
}
.fui-behance:before {
content: "\e014";
}
.fui-googleplus:before {
content: "\e00a";
}
.fui-facebook:before {
content: "\e00b";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment