OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - Icons

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear CSS Box Sizing CSS Display CSS Positioning CSS Z-Indexing CSS Opacity CSS Icons CSS Media Queries

ADVANCE

CSS Multiple Backgrounds CSS Gradient CSS Shadow CSS 2D Transform CSS 3D Transform CSS Transition CSS Animation CSS Image Reflection CSS Masking CSS Navigation Bar CSS Dropdown CSS !important CSS Specificity CSS Math Functions CSS Web Fonts CSS Pagination CSS Multiple Columns CSS Resizing and Offset CSS Variables CSS Conclusion

Icons

PREVIOUS NEXT

In this tutorial, I will be showing you how to add and use icons.

Icons are small graphical representation, symbol or small images.

Adding Icons

Below are the following ways you can add icons to your website.

  • Font Awesome Icons
  • Bootstrap Icons
  • Google Icons
  • Google Icons (Material Icon)
  • SVG
  • Background Images
  • Pseudo Elements

FONT AWESOME ICONS

  • Add the font awesome link inside the <head> tag.
  • Add the name of the icon class to the opening tag of the HTML element: <i> or <span>

Example

TRY IT OUT YOURSELF

BOOTSTRAP ICONS

  • Add the bootstrap link inside the <head> tag.
  • Add the name of the icon class to the opening tag of the HTML element: <i> or <span>

Example

TRY IT OUT YOURSELF

GOOGLE ICONS

  • Add the google link inside the <head> tag.
  • Add the name of the icon class to the opening tag of the HTML element: <i> or <span>

Example

TRY IT OUT YOURSELF

SVG ICONS

  • The <svg> tag is used together with the <path> tag to specify the icon.
  • The d attribute of the <path> tag defines the shape of the path

Example

TRY IT OUT YOURSELF
note
NOTE:

xmlns attribute specifies the address path.
icon class is used to reference the CSS styling.


BACKGROUND IMAGE

  • Use the background-image property to specify the icon address.

Example

TRY IT OUT YOURSELF

PSEUDO ELEMENTS

  • The ::before and ::after pseudo element can be used to insert icon before or after element.

Example

TRY IT OUT YOURSELF
PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT