Hướng dẫn icon trong html w3schools

How To Add Icons

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












Try It Yourself »

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











Try It Yourself »

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











Try It Yourself »

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


Try It Yourself »

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



Icons can easily be added to your HTML page, by using an icon library.

How To Add Icons

The simplest way to add an icon to your HTML page, is with an icon library, such as Font Awesome.

Add the name of the specified icon class to any inline HTML element [like or ].

All the icons in the icon libraries below, are scalable vectors that can be customized with CSS [size, color, shadow, etc.]

Font Awesome Icons

To use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the section of your HTML page:

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

Note: No downloading or installation is required!

Example











Result:

Try It Yourself »

For a complete reference of all Font Awesome icons, visit our Icon Reference.

Bootstrap Icons

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

Note: No downloading or installation is required!

Example











Result:

Try It Yourself »

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


Result:

Try It Yourself »

For a complete list of all icons, visit our Icon Tutorial.



Chủ Đề