[Designer Tips] How to use Font Awesome
welcome! It's RC Town! 🤗
Today, as announced in the previous post, 'Recommended free icon sites',
I would like to introduce how to use web icon fonts and the font awesome site!
Gather all those who want to use icon fonts!
1 Reasons to use web icon fonts
There are many other ways to insert icons, so why use a web icon font!
1. Icon font is a font property
Because icon fonts are applied as fonts, not images.
Design freedom is higher than the method of inserting an image.
There are many elements that can be changed with only css!
2. Takes up less space than image files
The smaller the capacity, the faster the processing speed.
3. Available in vector form
Unlike images, web icon fonts do not break no matter how much you increase their size.
4. Compatibility is good
Because it is not implemented using JavaScript.
It is exposed to the webpage in the same form in various browsers!
5. Diverse
Of course, the degree of freedom is not as high as that of the icon made by hand, but
Font Awesome One site alone provides 1609 free icons!
Can you understand why we use web icons that are somewhat difficult to use?
2 How to use icon fonts
Now, let's learn how to use icon fonts in earnest.
There are various icon font sites, but I am the most famous one among them.
I'm going to explain based on Font Awesome !
Font Awesome
The world's most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
If you go through the link
The screen below appears.
Please enter a photo description.
Click 'Start for Free'
Please enter a photo description.
If you enter your email address in the email input window, the CDN address will be sent to your mailbox!
If you click and enter your password and name, etc!
(Some questions are a bit annoying, but
There are also detailed instructions on how to use it and how to change CSS, so I recommend you to download it 😁 )
You can get a CDN address!
Now, enter this CDN address between <head> and <head> tags in Html.
Now that we have linked the link in html, shall we insert an icon?
There are a total of five icon styles in Font Awesome.
Unfortunately, none of these are available for free.
Only solid and regular.
However, there are 1609 free ones, so there will be no inconvenience in using them.
After clicking the icon you like, click the Html code shown in the picture to automatically copy it.
Now just paste this code anywhere you want! You can use any icon you want 😃
Below is the screen when the link is inserted in html without any style applied.
delete photo
Please enter a photo description.
Is it too plain?? Shall we apply CSS?
Font Awesome introduces five ways to change styles.
Each method can be checked on the official site by clicking on the link and logging in .
1.sizing
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
2. Coloring
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use
3.Rotating
https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons
4. Stacking
https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
5.Fixed-Width
https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons
This is an example of using the class name and css provided by Font Awesome!
In addition to this , stacking , which allows you to stack one icon on top of another ,
Even if the width and height are different , you can easily use the fixed-width function to match the height !
If you made it by inserting an image, you would have to change it one by one.
I think this is an example where you can feel the charm of icon fonts 😁
3 Other Icon Font Sites
In addition to Font Awesome, various sites provide icons.
I would like to reduce the article by introducing a few things!
It is good to make icons by working with images.
Wouldn't it be possible to create your own style with existing icons using icon fonts?
1. XEICON (Free)
XEIcon draws letters
XEICon is a vector graphics icon toolkit optimized for website creation. We help you create beautiful and intuitive web pages.
xpressengine.github.io
2. Google Material Icons (Free)
Material Icons
Get Material Icons
material.io
3. Fontello (Free)
Fontello - icon fonts generator
Fontello - icon fonts generator Feedback API GitHub Follow Tweet donate Download webfont ( 0 ) Select Icons Customize Names Customize Codes Help / Wiki Loading...
fontello.com
4. Modern Pictograms ($25 fee)
5. Others (previous post!)
https://blog.naver.com/ideavillage/222283668263
[Designer Bookmarks] 5 free icon sites recommended
Thanks for visiting! It's RC Town 🤗As flat design has recently become popular, its importance has risen...
blog.naver.com
댓글
댓글 쓰기