topic Is it possible to embed an icon in a CSS pseudo-element using an icon field? in CMS Development

Is it possible to embed an icon in a CSS pseudo-element using an icon field?

TMisuna — Sat, 25 May 2024 12:40:44 GMT

Is it possible to embed an icon in a CSS pseudo-element using an icon field?
Is the following code not sufficient to use fontawesome, especially the latest version 6 series, with CSS pseudo-elements such as::before and::after?

My CSS

.test-button-wrapper::before { display: inline-block; content: "\{{ module.style.icon_field.unicode }}"; font: var(--fa-font-{{ module.style.icon_field.type|lower }}); }

Actual output CSS.

#hs_cos_wrapper_widget_1716617474254 .test-button-wrapper::before { display: inline-block; content:"\f179"; font: var(--fa-font-regular); }

These appear to be correct outputs, but in fact the fontawesome icon was never displayed with this description.

I would like to know if you can help me with this. Thank you in advance.

Re: Is it possible to embed an icon in a CSS pseudo-element using an icon field?

Humashankar — Sat, 25 May 2024 15:29:52 GMT

Hi @TMisuna

Font Awesome icons are provided as a web font. To use them, ensure you've added the Font Awesome library to the <head> section of your HTML file. You can either host the library locally or link to a CDN similar to the below HTML

With the below revised CSS:

.test-button-wrapper::before {

display: inline-block;

content: "\{{ module.style.icon_field.unicode }}";

##### font: var(--fa-font-{{ module.style.icon_field.type|lower }});

font-family: FontAwesome;

}

Hope this helps - Happy to help further!!
Thank you very much and have a great one!
Warm regards

Re: Is it possible to embed an icon in a CSS pseudo-element using an icon field?

TMisuna — Sat, 25 May 2024 23:50:57 GMT

The icon was displayed successfully. Thank you very much.