Font (even more) Awesome - Patterned Invention
Hello, Habr! I present to you the translation of the article "Font (More) Awesome - an iconic invention" by Pubudu Dodangoda.
Whether you are building a website, mobile, or desktop application, there are a few things you cannot avoid. The proper use of graphics and icons is one of these basic needs. Stylish icons are just as important as alignment and color combinations - simply because one icon can express something that barely fits a hundred words.
While there are many ways to add an icon to a website, the most popular option is to use the Font Awesome library. After making one configuration, you can very easily add the desired icon:
However, there are situations where the set of Font Awesome icons offered is insufficient. For example, recently I wanted to use the Facebook, Twitter, and Airbnb logos on my site. However, I was extremely surprised - the Airbnb icon is not included in the Font Awesome. It turned out that the community requested this icon about 3 years ago . And she is not in the official set so far.
Also, if you want to add a not-so-popular icon, the easiest way is to use a tag img. Compared to using Font Awesome, it takes too much effort. The Font Awesome team, on the other hand, cannot serve all icon requests.
So I started looking for a simple way to connect the icons I needed. Fortunately, I found a tool called Calligraphr . I will explain how I used this tool (it takes a little CSS knowledge), and I will show you some simple tricks that will allow you to do something like the following in your code:
Looks good, right? Then let's make Font even more awesome!
Font creation
The first step in our adventure is to create the Font More Awesome font, which can be done using the instructions on their website . First you need to download the template. Here is an example:
Now we have to fill the sections with the desired images. You can print the template and draw freehand icons in it, or use a tool like Adobe Photoshop, GIMP with images that you download from the Internet.
Note translator. Do not try to use color or even gray images on Calligraphr - the probability of a successful conversion will be extremely small. Use only black and white images.
After filling out the template, it will look something like this:
The next thing you have to do is simple enough. Download the completed template on calligraphr, and click on the “build font” button - and BOOM! You can download your personalized font. Let's call him FontMoreAwesome.otf.
If you are wondering what kind of magic has just happened - this is called graphic vectorization . Due to the effects of special vectorization algorithms, you may notice some differences between the used image and the created icon. But, after conversion to vector format, the image can be scaled without loss of quality.
Integration with Font Awesome
Of course, you can consider the new font as a separate set of icons. But wouldn’t it be cool to expand the Font Awesome set itself? Let's do that!
The only thing you need to understand is that we will inherit the CSS styles defined by the Font Awesome CSS file. For example, it will contain something like this:
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}This means that when we define the icon element as follows, it will inherit styles display, font-sizeand text-renderingfrom the code above:
Now let's define our own CSS file. Let's name the file font-more-awesome.css.
The first entry in this file should be the declaration of the font-face rule. May be done as below. This is not difficult. Just a little basic CSS.
@font-face {
font-family: 'FontMoreAwesome';
src: url('../fonts/FontMoreAwesome.otf');
font-weight: normal;
font-style: normal;
}Next we can define the desired icons:
.fa-troll:before {
font-family: FontMoreAwesome;
content: "A";
}
.fa-lol:before {
font-family: FontMoreAwesome;
content: "B";
}
.fa-like-a-boss:before {
font-family: FontMoreAwesome;
content: "C";
}Note that we define icons as pseudo-elements using a selector before. Thus, we can embed the content we need into the element that uses the declared classes.
In the font FontMoreAwesome we created, “A”, “B” and “C” are indicated by icons for Troll, Lol and Like-a-boss, respectively. Although this is not the best way to do this.
Font Awesome uses for private use area (Unicode Private Use Area, PUA) , to insure chitalki screen from reading of random characters which represent the icons.
But, for the simplicity of the story, in our example we will stick to the letters of the English alphabet.
Another point worth mentioning is in the example above, when we embed our content on a page, we rewrite the font-family rule defined by Font Awesome.
Font More Awesome in Action
Finally, upload this CSS file to ours index.html.
Now you can use these icons as any other faicon. For example, the following icon will be large and spinning:
That's all. Have a good customization!
Note translator. When translating this article, I experienced the practice described in the case, making icons for Habr, Giktayms and Toaster. You can find the result in this repository .