Title: Using in Stylesheet Pseudo Elements
Last modified: January 28, 2019

---

# Using in Stylesheet Pseudo Elements

 *  Resolved [webinternational](https://wordpress.org/support/users/webinternational/)
 * (@webinternational)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/using-in-stylesheet-pseudo-elements/)
 * How would one use this plugin’s output in a pseudo element like ::before?
    Is
   there a way to escape the unicode to work in such an element?
    -  This topic was modified 7 years, 4 months ago by [webinternational](https://wordpress.org/support/users/webinternational/).

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Author [Matt Keys](https://wordpress.org/support/users/mattkeys/)
 * (@mattkeys)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/using-in-stylesheet-pseudo-elements/#post-11141141)
 * 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.
 *  Thread Starter [webinternational](https://wordpress.org/support/users/webinternational/)
 * (@webinternational)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/using-in-stylesheet-pseudo-elements/#post-11141408)
 * 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”?
 *  Plugin Author [Matt Keys](https://wordpress.org/support/users/mattkeys/)
 * (@mattkeys)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/using-in-stylesheet-pseudo-elements/#post-11141450)
 * 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.
 *  Thread Starter [webinternational](https://wordpress.org/support/users/webinternational/)
 * (@webinternational)
 * [7 years, 4 months ago](https://wordpress.org/support/topic/using-in-stylesheet-pseudo-elements/#post-11141825)
 * 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; }

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Using in Stylesheet Pseudo Elements’ is closed to new replies.

 * ![](https://ps.w.org/advanced-custom-fields-font-awesome/assets/icon-256x256.
   jpg?rev=3435775)
 * [Advanced Custom Fields: Font Awesome Field](https://wordpress.org/plugins/advanced-custom-fields-font-awesome/)
 * [Support Threads](https://wordpress.org/support/plugin/advanced-custom-fields-font-awesome/)
 * [Active Topics](https://wordpress.org/support/plugin/advanced-custom-fields-font-awesome/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/advanced-custom-fields-font-awesome/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/advanced-custom-fields-font-awesome/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [webinternational](https://wordpress.org/support/users/webinternational/)
 * Last activity: [7 years, 4 months ago](https://wordpress.org/support/topic/using-in-stylesheet-pseudo-elements/#post-11141825)
 * Status: resolved