We have designed a friendly icon set for an internal project. It is designed to be easily embeddable on a website or application using a webfont and css. We have decided to share it with everyone. Our creation flow was inspired by the excellent work of Dave Gandy's font awesome project and the Octicons font made by the github team.
Fonts are made with vectors, so they are scalable and correctly render on retina screens or mobile displays.
We use Private Use Area Unicode to avoid conflicts with existing characters. We also bind icon with existing unicode that represent the same symbol allowing fallback in case of loading typography problem.
Every project brings new icons, so we will update the font directory for every new icon we design.
Below are the classes to use the icons. We mainly use the Private Use Area Unicode (PUA) range to avoid conflicts with actual letters.
Fontello The font is available on Fontello. It alow you to choose spécific sign, the font will be lighter and you can also combine it with the other icon font available on Fontello
Start by downloading the project on this url.
1. Copy the font directory into your project 2. Copy the mfglabs_iconset.css style sheet into your project. 3. Copy the link of the stylesheet into your header
<link rel="stylesheet" href="css/mfglabs_iconset.css">
4. Drop the markup <i class="icon-name"></i> anywhere
<i class="icon-paperplane"></i>
Preset size by using custom sub class
1. add the subclass icon2x or icon3x
<i class="icon-cloud icon3x" aria-hidden="true"></i>
2. customise your css directly in mfglabs_iconset.css
.icon2x { font-size: 2em; }
.icon3x { font-size: 3em; }
Create bevel and emboss is easy by using custom sub class
1. add a sub class, for example : class="gradient"
<i class="icon-globe gradient icon3x" aria-hidden="true"></i>
2. customise your css directly in mfglabs_iconset.css
.style1 {
color: #999;
text-shadow: 1px 1px 1px rgba(27, 27, 27, 0.19);
background-image: -webkit-gradient(
linear,
left top, left bottom,
from(rgba( 182, 182, 182, 1)),
to(rgba(60, 60, 60, 1))
);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
}
3. add hover
.gradient:hover, .gradient .current {
color: #eee;
text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.25);
background-image: -webkit-gradient(
linear,
left top, left bottom,
from(rgba( 255, 255, 255, 1)),
to(rgba(187, 187, 187, 1))
);
}
Creative common attribution licenses
Licenses may copy, distribute, display and perform the work and make derivative works based on it only if they give the author or licensor the credits in the manner specified by these.
MFG Labs icon set from MFG Labs is licensed under a Creative Commons Attribution 3.0 License.
SIL Open Font License The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives. OFL-FAQ