FiFo - Fonts

by Paulo Ávila

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<style>
.btn { box-shadow: 0 3px #A9AFB3; }
.btn { padding-right: 25px; padding-left: 25px; }
</style>

<button class="btn">Add 1</button>

CSS

@import url("http://fonts.googleapis.com/css?family=Lato:400,700,700italic,900,400italic,300");
@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-arrow-right,
.fui-arrow-left,
.fui-cmd,
.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-search,
.fui-user,
.fui-mail,
.fui-lock,
.fui-gear,
.fui-radio-unchecked,
.fui-radio-checked,
.fui-checkbox-unchecked,
.fui-checkbox-checked,
.fui-calendar-solid,
.fui-pause,
.fui-play,
.fui-check-inverted-2 {
  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-arrow-right:before {
  content: "\e02c";
}
.fui-arrow-left:before {
  content: "\e02d";
}
.fui-cmd:before {
  content: "\e02f";
}
.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:...