How to Add Icons to Author Fields

In the PublishPress Authors plugin, it is possible to add icons to display in your site's Author Boxes. For example, you can show an email icon next to an “Email Address” field, or a Facebook icon next to a “Facebook Profile” field. Click here to find out more about Author Fields.

PublishPress Authors supports two sources of icons: Dashicons and Font Awesome.

Here is the example code to use for an icon from Dashicons:

<span class="dashicons dashicons-admin-links"></span>

Here is the example code to use for an icon from Font Awesome:

<i class="fa-solid fa-bars"></i>

Using Dashicons in Author Boxes

Dashicons are part of the WordPress core which means it is a lightweight and reliable source for icons. To find the HTML for a particular icon, follow these steps:

  • Find an overview of all the available icons by clicking this link.
  • Click the icon you want to use. It will now appear at the top of the screen.
  • Click the “Copy HTML” link next to the icon.
Choosing a Dashicons icon
  • Copy the HTML you see in the pop-up window.
Dashicons icons HTML
  • You can now add this code into the “Display Icon” box inside “Author Boxes”.
  • Your icon should now be available in the “Author Box Preview” area at the top of the screen.
Dashicons icons HTML in PublishPress Authors

Using Font Awesome in Author Boxes

Font Awesome is a very popular source of icons for web projects. By default, Font Awesome icons to avoid any potential conflicts with other themes or plugins. To enable Font Awesome, follow these steps:

  • Go to “Authors”, then “Settings”.
  • Click the “Advanced” tab.
  • Check the box for “Layout icons”.
  • Click “Save Changes”.
Enabling Font Awesome icons in PublishPress Authors
  • Find an overview of all the available icons by clicking this link.
  • Click the icon you want to use. It will now appear in a pop-up window.
  • Click the “Copy HTML” link next to the icon.
Font Awesome icons HTML
  • You can now add this code into the “Display Icon” box inside “Author Boxes”.
  • Your icon should now be available in the “Author Box Preview” area at the top of the screen.
Adding Font Awesome icons HTML to PublishPress Authors

Professional publishing plugins for WordPress! Get PublishPress