Add icon with css

How To Add Icons

You can place Font Awesome icons just about anywhere, and we’ve tried to make it so that icons will take on the characteristics and blend in with surrounding text naturally.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

We’ll cover the basics of how to add icons to your project, shorthand class names for different icon styles, how to add icons to HTML, using icons aliases, and more!

Before You Get Started

To add an icon, you need to know a few bits of information:

1. The shorthand class name for the style you want to use
2. The icon name, prefixed with fa- (meaning «Font Awesome» naturally!)
3. The shorthand class name for the family you want to use Optional

There are three families of Font Awesome icons — each with a unique look, class name, and @font-face font-family. In both Font Awesome Classic and Sharp, there are five styles of Font Awesome icons. Here are some examples:

Style	Availability	Style class	font-weight	Looks like
Solid	Free Plan	fa-solid	900
Regular	Pro only	fa-regular	400
Light	Pro only	fa-light	300
Thin	Pro only	fa-thin	100
Duotone	Pro only	fa-duotone	900

Style	Availability	Style class	font-weight	Looks like
Solid	Pro only	fa-sharp fa-solid	900
Regular	Pro only	fa-sharp fa-regular	400
Light	Pro only	fa-sharp fa-light	300
Thin	Coming Soon!
Duotone	Coming Soon!

Font Awesome Classic is Our Default Family

If you don’t specify a family class name, our styling toolkit will render icons in Font Awesome Classic, the original look and feel that’s always in style. But if you need to reference the Classic family, you can just add the fa-classic in your icon’s HTML class names. If you want to change any or all icons to use Sharp, just add fa-sharp in the same manner!

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

We designed Font Awesome for use with inline elements, and we recommend that you stick with a consistent element in your project. We recommend using element with the Font Awesome CSS classes for the style class for the style of icon you want to use and the icon name class with the fa- prefix for the icon you want to use. Accessibility-minded folks may want to opt for the element instead of .

 element with: 1. the `fa-solid` style class for solid style 2. the `user` icon with the `fa-` prefix --> i class="fa-solid fa-user">i>  element, with classes applied in the same way --> span class="fa-solid fa-user">span> 

Setting Different Families + Styles

And here’s an example that references different styles and families of icons:

 i class="fa-solid fa-user">i> i class="fa-regular fa-user">i> i class="fa-light fa-user">i> i class="fa-thin fa-user">i> i class="fa-duotone fa-user">i> i class="fa-brands fa-font-awesome">i> i class="fa-sharp fa-solid fa-user">i> i class="fa-sharp fa-regular fa-user">i> 

Font Awesome Sharp requires Pro and specific versions!

Make sure you have an active Pro-level plan or a Pro license with access to the specific versions that include Sharp’s styles.

Stay on target with those CSS rules!

When using our SVG framework, remember that DOM elements with Font Awesome classes are replaced with injected elements by default. Be sure that your CSS rules target the right element.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

We’ve updated many of our icon names in Version 6 to make them more universal and consistent. But we wanted to make sure not to break your existing code, so we made aliases for renamed icons to allow them to work with either the old or new names.

And you can use the old or new name for styles as well. So you can still use fas , far , fal , fad , and fab . And we’ve also included older prefix versions for our new Thin style ( fat ) and new Sharp family of styles (Sharp Solid is fass while Sharp Regular is fasr ).

 i class="fa-solid fa-cutlery">i> i class="fa-solid fa-utensils">i> i class="fas fa-utensils">i> i class="fa-sharp fa-solid fa-times">i> i class="fa-sharp fa-solid fa-close">i> i class="fass fa-xmark">i> 

Alternate Ways to Add Icons

Источник

4 Easy Ways to Add Icons In HTML CSS (Simple Examples)

Welcome to a beginner’s tutorial on how to add icons in HTML and CSS. Need to add some icons to your website? Make the contents a little easier to navigate?

There are various ways to add icons in HTML and CSS:

1. The easiest way is to use HTML symbols, simply copy-and-paste the respective HTML entity code. For example, ★ represents a star symbol.
2. Download icons images from websites such as FlatIcon, and use them as-it-is. E.G.
3. Use a set of font icons, such as Webdings. E.G.

   ABC

4. Lastly, load and use icon libraries such as Font Awesome and Material Icons.

But just how are these done exactly? Let us walk through some examples in this guide – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

TLDR – QUICK SLIDES

TABLE OF CONTENTS

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

ADDING HTML CSS ICONS

All right, let us now get into the various methods on how to add icons in HTML and CSS.

METHOD 1) HTML SYMBOLS

★ STAR!
 
☂ Weather report.
 
☃ Do you want to build a snowman?
 
☻ Happy face.

What kind of sorcery is this? Well, these are HTML symbols, and there are a ton of these – Everything from arrows, to symbols, to currencies, to smilies, and more. The best part is that they are baked straight into native HTML, and we don’t need to load 3rd party frameworks for these to work.

The usage is very simple, just define &#NUMBER; and it will “translate” into the respective HTML symbol. I will leave a link to the complete reference in the extras section below. Also, these symbols are treated just like text, we can control the size using font-size , even apply font-weight and text-decoration on it.

METHOD 2) ICON IMAGES

2A) FLAT IMAGE ICON

 So call me maybe?

So call me maybe?

This should be “Captain Obvious”, just insert an image icon. Do a search for “free icons” or “free clipart”, they are all over the Internet.

2B) IMAGE FONT SET

Following up on the above image icon method, it is inefficient to use one icon per image. This is the smarter way where we combine all the icons into one single image, but it requires a little bit of CSS to work.

 .ico < display: inline-block; width: 32px; height: 30px; background-image: url('icon-set.png'); background-repeat: no-repeat; >.ico-screen < background-position: 0 0; >.ico-phone < background-position: -32px 0; >.ico-pc < background-position: -64px 0; >.ico-tablet < background-position: 0 -31px; >.ico-camera Screen Phone PC Tablet Camera

That’s right. All we are doing here is to use the icon set as the background image, then “map” them using background-position .

METHOD 3) ICON FONT SET

 @font-face < font-family: Heydings; src: url(heydings_icons.ttf); >.icon  

Fonts usually contain alphabets, but there are some interesting ones that are sets of icons instead – All we have to do is to find these sets of icons, include them using CSS @font-face , then use it just as usual.

I will leave links to free font websites in the extras section below, just do a font search for “icons”, and there will be plenty more. But please do take care that not all fonts are “fully free”… Some are free for personal use, but not for commercial use.

METHOD 4) ICON LIBRARIES

4A) FONT AWESOME

• Load the Font Awesome library from the CDN. There are a lot of versions… If unsure, just load all.min.css which contains everything.
• To insert an icon, use the tag, and give it a CSS class=»fa fa-ICON» – Check out the Font Awesome Gallery for the full list of available icons.

Of course, if you somehow need even more icons, there are also paid plans on Font Awesome.

4B) MATERIAL ICONS

Material Icons is another set of popular free icons, which you may find very familiar… Because it’s by Google. Check out their page on Google Fonts for the full list of icons.

EXTRA BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

WHICH IS THE BEST METHOD?

• I personally prefer HTML symbols when it comes to small projects, as it is the most lightweight option. But take note that some symbols will not show up properly on the older browsers, you will not want to use this if backward compatibility is an issue.
• Images are the safest and will always work, but they add to the loading time bloat.
• Font Awesome and Google Material Icons are also pretty safe options but they bloat the loading time as well.
• Loading fonts are kind of meh.

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник

Icons Tutorial

To insert an icon, add the name of the icon class to any inline HTML element.

The and elements are widely used to add icons.

All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)

Font Awesome 5 Icons

To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.

Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.

Note: No downloading or installation is required!

Example

Font Awesome 4 Icons

To use the Font Awesome 4 icons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

Bootstrap 3 Icons

To use the Bootstrap 3 glyphicons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

Note: Glyphicons are not supported in Bootstrap 4.

For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.

Google Icons

To use the Google icons, add the following line inside the section of your HTML page:

Note: No downloading or installation is required!

Example

cloud
favorite
attachment
computer
traffic

For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon Reference.

Источник