HomeProgramCSS and CSS3

Icon in CSS

How to add icons

The easiest way to add icons (icons) to HTML pages is to use the icon library. Just like Font Awesome, just add the name of the icon class to any inline HTML element (as well). All the icons in the icon library below are in vector format that can be scaled in CSS (size, color, shadow .)

Font Awesome Icon

To use Font Awesome's icon, add the following line to the section in the HTML page. You do not need to download or install anything.

 

Example of the icon with Font Awesome

Icon in CSS Picture 1
Images of icons in the example on the browser

Bootstrap Icon

To use Bootstrap's icon, add the following line to the section in the HTML page. This way there is no need to download or install anything.

 

Example icon with Bootstrap















Icon in CSS Picture 2
Bootstrap is a popular choice to get icons for HTML pages

Google Icon

To use Google Icon, add the following line to the section in the HTML page. As with the above two ways, you do not need to download or install anything.

 

Example Google Icon








 cloud 
 favorite 
 attachment 
 computer 
 traffic

Icon in CSS Picture 3
Google also has its own icon library for developers

Previous post: Font in CSS

The following article: Path in CSS

4 ★ | 2 Vote
CSSlearn CSSCSS icons

You should read it

May be interested

  • Please download the free Covid-19 icon set for the designPlease download the free Covid-19 icon set for the design
    iconfinder's covid-19 icon set includes over 300 free vector icons related to hygiene and awareness of the spread of viruses.
  • Wifi icon missing on the Taskbar Windows 10, this is how to fixWifi icon missing on the Taskbar Windows 10, this is how to fix
    by default, the network or wifi icon always appears on the system tray of windows 10 taskbar so that users know if their computer is connected to the network? however for some reason (such as upgrading to windows or installing on windows 10 ...) that icon disappears. here's how to fix it.
  • How to pin the app to the Taskbar to open it fasterHow to pin the app to the Taskbar to open it faster
    there are many ways to pin the application to the taskbar, or the app icon to the taskbar. below, tipsmake.com will tell you 2 simple, quickest ways to pin software and applications to the taskbar. invite you to track offline.
  • Instructions to make the phone icon fall wildly uniqueInstructions to make the phone icon fall wildly unique
    it is interesting that you can make icons move freely on the device with just a shake, rotate or touch screen.
  • How to resize Desktop Icon on Windows?How to resize Desktop Icon on Windows?
    icons are displayed on the desktop screen to help users easily manipulate and use. by default, the size of icons on the desktop screen is set to medium size, but if you want to save space you can set the size of these icons to be smaller than the size. default ruler.
  • How to change iPhone icon very simply without JailbreakHow to change iPhone icon very simply without Jailbreak
    changing iphone icons is very simple and we do not need to jailbreak the device, affecting the system. we can use many applications to change iphone icons or websites that support changing iphone icons.
  • Troubleshoot the speaker icon with a red crossTroubleshoot the speaker icon with a red cross
    the following article will help you fix the small error when the speaker icon under the taskbar unexpectedly has a red slash while you have installed the driver for card sound and this phenomenon is accompanied by the error message no speakers or headphones are plugged in / no audio fix tutorial
  • How to delete the arrow on the Shortcut icon in Window 10How to delete the arrow on the Shortcut icon in Window 10
    when we create the icon for the application to the desktop, we will see the difference is that there is an arrow in the left corner of the icon. although the arrow next to the icon does not affect the operation, but people often want to delete them.
  • How to Create a Windows IconHow to Create a Windows Icon
    this wikihow teaches you how to create a shortcut icon for a windows computer. desktop shortcuts typically use predetermined icons, but you can create your own icon by using an online converter. if you'd like to create a simple,...
  • Turn off the Skype icon under the Taskbar after Sign OutTurn off the Skype icon under the Taskbar after Sign Out
    skype is one of the most used chat software today because of its simple, easy-to-use interface, high stability, allowing sending and receiving files directly. however, there is a small inconvenience, that is when the account is exited, the icon will still be under the taskbar whether you close it or not. today, tipsmake.com will guide you how to completely turn off the skype icon under the taskbar after sign out. please consult.

CSS and CSS3