Overview
Font Awesome is a great thing, it's a font whose symbols are images. For example, we want to place such a picture on our website page:
It is enough to write a small HTML
code, and the picture will be on our website:
<i class="fa-solid fa-thumbs-up"></i>
But why we can't just place a picture using the img
tag?
<img src="/thumbs-up.svg" />
With this placement, we will not be able to change the color of the picture, for example, when hovering the mouse pointer over the picture, as well as apply css transitions
to the color. Of course, there are solutions based on css filters
https://stackoverflow.com/a/50942954 , but this complicates the readability and support of the code.
There is another method to change the color of the image - add inline svg
:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="#0000ff" d="M128 447.1V223.1c0-17.67-14.33-31.1-32-31.1H32c-17.67 0-32 14.33-32 31.1v223.1c0 17.67 14.33 31.1 32 31.1h64C113.7 479.1 128 465.6 128 447.1zM512 224.1c0-26.5-21.48-47.98-48-47.98h-146.5c22.77-37.91 34.52-80.88 34.52-96.02C352 56.52 333.5 32 302.5 32c-63.13 0-26.36 76.15-108.2 141.6L178 186.6C166.2 196.1 160.2 210 160.1 224c-.0234 .0234 0 0 0 0L160 384c0 15.1 7.113 29.33 19.2 38.39l34.14 25.59C241 468.8 274.7 480 309.3 480H368c26.52 0 48-21.47 48-47.98c0-3.635-.4805-7.143-1.246-10.55C434 415.2 448 397.4 448 376c0-9.148-2.697-17.61-7.139-24.88C463.1 347 480 327.5 480 304.1c0-12.5-4.893-23.78-12.72-32.32C492.2 270.1 512 249.5 512 224.1z"/>
</svg>
The fill
attribute is responsible for the color. But the easiest way is to change the color is the css
styles:
.icon {
color: red;
}
So, in this article we:
- Create your own font, which will consist of three vector images;
- Convert our font to
woff
andwoff2
formats to optimize file size; - Develop
css
styles for convenient addition of font characters to the site page.
1. Creating a font
To create a font, we will need two open source programs:
Download and install these programs, as well as download three images in svg
format, from which we will make our font:
Please note that thumbs up
and face with a smile
have a resolution of: 512x512
, and cup
: 640x512
. In order for the font characters to be centered, we need to bring them to a single resolution. In this example, we will choose the resolution 512x512
. This means that the resolution of the cup
will have to be changed, and the image will be entered and centered in the new resolution. To do this, we will need `Inkscape'.
- Open our
cup
inInkscape
; - Go to the menu
File
->Document Properties...
; - In the
Page
tab in theCustom size
section, selectUnits
:px
- size in pixels. And there we set the resolutionWidth
andHeight
to512
. As a result, we will get a saucer and a cup handle protruding beyond the margins of the canvas:
Further:
- Click on the image of the
cup
; - In the menu, select
Object
->Transform
->Scale
, set the units of measurement topx
, tickScale proportionally
, setWidth
to512
and pressEnter
, after which the value ofHeight
should change proportionally. Result:
Now we need to position the image in the center of the canvas, for this:
- In the menu, select
Object
->Align and Distribute...
; -
Relative to
selectPage
, and click on the alignment icons - horizontally and vertically.
As a result, we get a picture in the center of the canvas:
It remains only to save the result in an svg
file:
- Menu
File
->Save As...
; - Select the format
Plain SVG (*.svg)
and click theSave
button.
As a result, we got an image in svg
format with a resolution of `512x512' pixels. All three images have the same resolution.
Now you can start working with FontForge
:
- Open the program;
- Click on the
New
button to create a new project; - Select, for example, the letter
s
from the wordsmile
and double-click on the empty cell under the letters
. The symbol editor should open. - Open the menu
File
->Import...
,Format
->SVG
, select the fileface with a smile
and clickOK
. - Close the symbol editor, then under the letter
s
we will see our image with a smile. - Repeat the steps for the two remaining pictures, for the
cup
I chose the letterc
, forthumbs up
the lettert
. As a result, we should have images under the letterss
,c
andt
:
It remains only to save the result to a font file:
- Menu
File
->Generate Font...
- Select the name
icons.ttf
and press theGenerate
button, thenYes
.
Congratulations, our font is ready!
2. Convert our font to woff
and woff2
formats
To convert a font from the ttf
format to woff
and woff2
, I wrote a small console utility that you can download from https://github.com/druxax/font-conv .
To install, you need to download and go to the font-conv
utility directory in the console, then run the commands:
npm pack
sudo npm install -g font-conv-cli-1.0.0.tgz
After installation in the console, go to the directory with the font and run the conversion utility:
font-conv-cli
After completion, the utility will create a directory in the same folder named font-conv-res
- it will contain two files of converted fonts with extensions woff
and woff2
.
Move all 3 font files to one folder fonts
and we will proceed to the last point - add the font to the site page.
3. Adding the font to the site
Prepare an html
template for our website, create a file index.html
.
<!DOCTYPE html>
<html>
<head>
<title>Font Excellent</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Font Excellent</h1>
<!-- TODO -->
</body>
</html>
Let's create a file styles.css
and include our font in it.
@font-face {
font-family: "Font Excellent";
src: url("fonts/icons.woff2") format('woff2'),
url("fonts/icons.woff") format('woff'),
url("fonts/icons.ttf") format('truetype');
font-weight: 400;
font-style: normal;
}
Let's add styles for font characters to styles.css
.
/* General settings for all font characters */
.icon::before {
display: inline-block;
font-family: "Font Excellent";
font-size: 8rem;
font-weight: 400;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
/* For a face with a smile */
.icon-smile::before {
content: "\0073";
}
/* For thumbs up */
.icon-thumbs-up::before {
content: "\0074";
}
/* For the cup */
.icon-cup::before {
content: "\0063";
}
/* Color animation and other styles */
body {
display: flex;
flex-direction: column;
align-items: center;
}
.icon {
margin: 0 1rem;
animation: color-animation 4s linear infinite;
}
.icon-cup {
--color-1: #df8453;
--color-2: #4195b8;
--color-3: #e4a3a2;
}
.icon-smile {
--color-1: #dfaf48;
--color-2: #aed4d0;
--color-3: #bff2a7;
}
.icon-thumbs-up {
--color-1: #aed4d0;
--color-2: #e19c9b;
--color-3: #a9cfcb;
}
@keyframes color-animation {
0% {color: var(--color-1)}
32% {color: var(--color-1)}
33% {color: var(--color-2)}
65% {color: var(--color-2)}
66% {color: var(--color-3)}
99% {color: var(--color-3)}
100% {color: var(--color-1)}
}
Here we set the general styles for the icon
class and specified the content - character encoding for each class of our images content: "\XXXX"
, where XXXX
is CSS Entity value. When creating the font, we chose the letters c
, s
and t
as its symbols, for example, the sign s
CSS Entity - 0073
. If you click on a symbol in FontForge
, then you can see the character encoding under the menu bar. For example, by clicking on t
, its code will be specified as U+0074
, which means that in css
we will write: content: "\0074";
.
We are done with css
, it remains only to add our images to our html
template.
<!DOCTYPE html>
<html>
<head>
<title>Font Excellent</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Font Excellent</h1>
<div>
<i class="icon icon-cup"></i>
<i class="icon icon-smile"></i>
<i class="icon icon-thumbs-up"></i>
</div>
</body>
</html>
Now, by opening the file index.html
in the browser, we should see:
Please support me, put likes, subscribe to the blog, write comments.
Thanks for attention.
Top comments (2)
Great tutorial.
Only 94 people saw this post, please share it with your audience if you can.