Using in Stylesheet Pseudo Elements

The only thing that comes to mind seems a bit clunky, having the template output a block of css after the element.

Like given the element:

<div class="my-unique-element-class"></div>

You could in the template output something like this after it:

<style>
    .my-unique-element-class:before {
        content: '<?php echo $icon_unicode; ?>';
        font-family: "Font Awesome 5 Free";
    }
</style>

I haven’t tested the above code but it should illustrate the general idea. I’d be curious if anyone else has any other ideas.

Thanks for responding!

Actually, I’m having no issues getting the field into the stylesheet. The issue I’m having is that it outputs the unicode in full, like so: &#xf042. However, pseudo-elements don’t seem to recognize this. Instead it needs to be the escaped value, like so: “\f042”.

Is there a way to get the plugin to output “\” instead of &#x”?

Ah I see what you mean. If you change the out format to “Icon Object” you should find what you need.

The return from the plugin will be something like:

stdClass Object
(
    [element] => <i class="far fa-angry" aria-hidden="true"></i>
    [class] => far fa-angry
    [hex] => \f556
    [unicode] => 
    [prefix] => far
)

And the ‘hex’ part should be what you are looking for.

Awesome,

Thanks, I was able to get things working with that information.

In case anyone else has a similar need to output the ACF Font Awesome element into a CSS pseudo-element such as “::before”, this is how I implemented it for output from an options panel:

.sidebar-primary .current_page_item:before{
content:”<?php $icon = get_field(‘sidebar_icon’, ‘option’); echo $icon->hex; ?>”;
font-family: FontAwesome !important;
position:relative;
height:30px;
float:left;
}