In this course we will learn to design icons in a vectorial way, to prepare the source with them in the correct way and, finally, to use it as webfont in our website.
One of the most popular techniques to embed icons on our website (social networks, sites, shopping cart ...) is through a source of icons. With this method we obtain two clear advantages: 1) all our icons will be vector and, therefore, scalable without loss of quality; and 2) all the icons will be in the same container file and, therefore, we reduce the requests to the server. In this course we will learn to design icons in a vectorial way, to prepare the source with them in the correct way and, finally, to use it as webfont in our website.
Before starting work we must understand at what point we are to attack this course with maximum guarantees, so we will see what web icons are and what formats exist to understand the advantages of making our own icon source.
Introduction to Icon font design for web 01:19
Base files of Icon font design for web 01:05
Icons for the web, using typography 04:24
Icons for the web as image 03:29
Icons for the web like SVG 02:32
Icons for the web as source of icons 06:41
Resources and icon links for the web 05:27
Why create our own source of icons 02:39
We are going to see the theory that hides behind pictograms and web icons, defining both concepts first and then going deeper into the graphic and typographic guidelines that we must follow when designing them.
What are the pictograms and icons 02:32
Graphic and typographical guidelines 04:28
Adobe Illustrator is a vector editing program with which we can generate vector graphics and, in this case, icons. Let's see how the interface of this program is, the tools it has and the vectorization methodology that we are going to follow.
Adobe Illustrator as generator of vector graphics 04:24
Interface and tools of Adobe Illustrator 07:36
Vectorization methodology with Adobe Illustrator 07:58
Design of icons for the web
The time has come to start working on our collection of icons, and we are going to do it from a basic grid that will help us design three different icons: one generic, one for a web application and one for a brand.
Definition of reticle as a previous step to our work 04:51
Creation of a generic icon: user 03:51
Creating a web application icon: delete 04:04
Creating a brand icon: social network 05:04
Once we have our icons designed, we will have to transfer them to a typographic font editing program. In this course we are going to do it through Glyphs, so first let's see what this program is like and how we can work with it.
Introduction to Glyphs 02:35
Interface and tools of Glyphs 08:15
Extra: design the icons in Glyphs 07:43
Production of icon font
Now the interesting thing comes: we are going to produce our own source of icons that we will later use on our website. We are going to do it from Glyphs by importing the vector icons and generating a font.
We work with fonts: typographical measures 07:49
Import icons to Glyphs from Adobe Illustrator 08:19
Export our icon font completed 08:07
Extra: typographical ligatures 04:33
Extra: improve to semantic source 06:38
Once our icon fonts have been exported, it is time to load them correctly in our CSS file to later use them and all their properties in our HTML page. Let's see how to do it.
Brief introduction to the CSS style sheets 02:48
The CSS rule @ font-face 03:22
Embed a font and use it with @ font-face 07:38
Use a semantic source 05:45
Extra: working with CSS properties 03:00
Final summary of Icon font design for web 01:16
Size: 175 MB
Content: 11 Videos
Duration: 47 min
Software: CSS, CSS 3
Base Files: If included
Totally free of viruses and malicious software, so do not wait any longer to download it now.
Do not forget to give us an opinion about the program, to improve the content.
NOTE: Do not forget to follow us on our facebook and twitter social networks so that you become part of our community and receive the notification every time we post something new, so you will not miss anything.
NO registration required!
If the question you have has not yet been answered here, use the form below to ask something about this addon.