About Icons Font That Comes with Astra

Astra comes with a custom lightweight & beautiful icon font. All icons used in the theme are used in this library.  If you wish to use these icons on your website:

  • Add respective content code documented below
  • Set font-family as Astra

All font-icons available with Astra and their content code are described below-

Icon Content CSS Class
. e900 astra-icon-down_arrow
. e5cd astra-icon-close
. e25d astra-icon-drag_handle
. e235 astra-icon-format_align_justify
. e5d2 astra-icon-menu
. e8fe astra-icon-reorder
. e8b6 astra-icon-search
. e56b astra-icon-zoom_in
. e901 astra-icon-check-circle
. f07a astra-icon-shopping-cart
. f290 astra-icon-shopping-bag
. f291 astra-icon-shopping-basket
. e903 astra-icon-circle-o
. e902 astra-icon-certificate

Here is a screenshot that shows how the default added icon appears.

1. To add Astra icons with content –

Add any custom CSS class to the HTML structure and add content with CSS on that class. For example, the HTML structure is

 <span class="custom-icon-class">Home</span>

then add a CSS like

.custom-icon-class:after{
content:"\e900";
font-family:Astra;
}

2. To add Astra icons with CSS class – 

Add a required class in HTML structure like –

<span class="astra-icon-down_arrow">Home</span>
Not the solution you are looking for? Check other articles, or open a support ticket.