How to use font icons

Hello,

Our WoodMart font icons are just system icons that are used in our theme like wishlist, cart widget, social buttons etc. It is not a library like Font Awesome.

Yes, you can use the FontAwesome icons on the site, If you want to use font awesome enable the option “Always use” for the Fontawesom in the Theme Settings > Performance > fonts and icons.

WoodMart fonts are specifically created for the WoodMart theme. Font Awesome is a popular and widely used icon library that offers a diverse collection of icons for various purposes.

Best Regards.

Hello,

01. Here is a list of the Unicode for our icons.

$icon-angle-down: \e900;
$icon-angle-left: \e901;
$icon-angle-right: \e902;
$icon-angle-up: \e903;
$icon-arrow-down: \e904;
$icon-arrow-left: \e905;
$icon-arrow-right: \e906;
$icon-arrow-up: \e907;
$icon-bars: \e908;
$icon-cross: \e909;
$icon-heart: \e90a;
$icon-loupe: \e90b;
$icon-user: \e90c;
$icon-phone: \e90e;
$icon-map-marker: \e90f;
$icon-reply: \e910;
$icon-edit: \e911;
$icon-comment: \e912;
$icon-ellipsis-h: \e913;
$icon-star: \e914;
$icon-star-full: \e916;
$icon-calendar: \e917;
$icon-check: \e919;
$icon-plus: \e91a;
$icon-minus: \e91b;
$icon-share: \e91c;
$icon-expand-arrows: \e91e;
$icon-angle-down-bold: \e921;
$icon-angle-left-bold: \e922;
$icon-angle-right-bold: \e923;
$icon-angle-up-bold: \e924;
$icon-arrow-down-left-thin: \e927;
$icon-arrow-down-right-thin: \e928;
$icon-quote: \e929;
$icon-info: \e930;
$icon-exclamation: \e931;
$icon-image: \e932;
$icon-play-button: \e933;
$icon-music: \e934;
$icon-link: \e935;
$icon-image-gallery: \e936;
$icon-cart: \e937;
$icon-video: \e938;
$icon-pause: \e939;
$icon-unmute: \e940;
$icon-mute: \e941;
$icon-external-link: \e942;
$icon-retweet: \e943;
$icon-discount-coupon: \e944;
$icon-product-list-icon-1: \e945;
$icon-product-list-icon-2: \e946;
$icon-product-list-icon-3: \e947;
$icon-product-list-icon-4: \e948;
$icon-bars-2: \e949;
$icon-bag: \e950;
$icon-compare: \e951;
$icon-cart-empty: \e952;
$icon-cart-check: \e953;
$icon-size-guide: \e90d;
$icon-product-list-icon-2-1: \e954;
$icon-filter: \e955;
$icon-filters-bar: \e956;
$icon-wishlist-empty: \e957;
$icon-tablet-sorting: \e958;
$icon-envelope-regular: \e959;
$icon-facebook-f-brands: \e960;
$icon-twitter-brands: \e961;
$icon-instagram-brands: \e962;
$icon-telegram-brands: \e963;
$icon-youtube-brands: \e964;
$icon-snapchat-ghost-brands: \e965;
$icon-whatsapp-brands: \e966;
$icon-pinterest-brands: \e967;
$icon-linkedin-in-brands: \e968;
$icon-behance-brands: \e969;
$icon-dribbble-brands: \e970;
$icon-vimeo-v-brands: \e971;
$icon-tumblr-brands: \e972;
$icon-soundcloud-brands: \e973;
$icon-github-brands: \e974;
$icon-flickr-brands: \e975;
$icon-spotify-brands: \e976;
$icon-vk-brands: \e977;
$icon-odnoklassniki-brands: \e978;
$icon-facebook-box: \e979;
$icon-view: \e980;
$icon-home: \e981;
$icon-shop: \e982;
$icon-blog: \e983;
$icon-my-ac-account-details: \e984;
$icon-my-ac-addresses: \e985;
$icon-my-ac-downloads: \e986;
$icon-my-ac-log-out: \e987;
$icon-my-ac-setting: \e988;
$icon-my-ac-orders: \e989;
$icon-my-ac-wishlist: \e990;
$icon-tiktok-brands: \e991;
$icon-viber-brands: \e992;

2. Sorry What do you mean by adding the icons into the text? Can you please explain with the help of the screenshots for better understanding.

3. I have added a location icon from font-awesome5 and it’s working.
https://www.fontawesomecheatsheet.com/font-awesome-cheatsheet-5x/

4. You can force Font Awesome 5 library to be loaded on all pages.

Best Regards.

Hi

1. Woodmart icon font doesn’t have a copyright icon. If you want to add one, you need to use FontAwesome icon font or separate SVG image. Full list of “woodmart-font” icons can be seen in theme settings https://prnt.sc/eN8jn08handt.
2. Woodmart icon font is not a FontAwesome alternative, and it didn’t work the same way. “woodmart-font” its utility font created for narrow-profile goal to style only theme related interface without using “heavy” 2000+ icons third party fonts which can cause issues with page speed performance. Its icons are used only in themes style and added directly to desired theme element via CSS. “woodmart-font” can’t be called by some name class, like does in FontAwesome. If you want to use “woodmart-font” in other parts of your site, you need to create separate custom CSS code for each individual case. For example:

.your-custom-class {
    content: "\f144";
    font-family: "woodmart-font";
}

3. Woodmart doesn’t have the built-in “FontAwesome” font. All icon fonts that can be used with Woodmart theme are included in page builder plugins (WPBakery or Elementor).

4. Both WPBakery or Elementor page builders uses FontAwesome 5.

Kind Regards

Hi,

We cannot give specific numbers because the overall site speed depends on many factors. In practice, this may not be noticeable to most users, but for those who care about the highest Google Page Speed score, font optimization will make a big difference.

In general, one font can take up about 100kb (https://prnt.sc/POGYz30_LAAE) alongside with 50kb of Font Awesome CSS (https://prnt.sc/uZ3shsH2N0RQ), while individual images take up less than a kilobyte (https://prnt.sc/e0taPEsFBeqU), so in that case, if you plan to use a few numbers of icons, the best option will be to use separate SVG images, otherwise you can use the entire icon font.

Kind Regards