Adding icons to the title of custom fields

Sometimes you may want to embellish the fields, or have some signatures for them. There is not only a way to do that such as adjusting size, space, color, … but also adding icons into their title. Instead of using only text for the meta box’s title or field name, we can use icons for addition or alternative. Let’s dive in to explore the process of adding icons to the title in detail.

This is an example for adding the icons that we will create in this practice.

Video Version

Preparation

To have custom fields on your site, you might have the Meta Box plugin. You can install it directly from wordpress.org.

Beside that, if you have the Meta Box Builder to create and manage the fields in an intuitive UI, it’ll be easier to add the icons. Otherwise, you can add the HTML script of the icon to the code directly.

I will give you both ways in this practice.

1. Enqueuing the icon library

As you know, there are several icon libraries available. You must enqueue your wanted library to the theme before using it.

If you use FontAwesome, Elusive, or Genericons, you must follow these executions:

1. Download the library to your computer.
2. Copy the CSS and font files and paste them to the theme’s folder.
3. Add this code to the functions.php file.

function your_prefix_enqueue_admin_style() {
    wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() 'css_file_direction_in_the_theme_folder' );
}
add_action( 'admin_enqueue_scripts', 'your_prefix_enqueue_admin_style' );

Otherwise, you can totally skip this step if you use Dashicons. This library is developed by WordPress so you can use it without enqueuing.

From now on, you can use any icons from the enqueued library on your site, including the field title.

2. Creating custom fields

Now, I will create some fields for adding icons to the titles.

Go to Meta Box > Custom Fields to create the fields.

These are the fields that I have created. They are all the basic and typical fields, so I made no special settings.

After having all the fields, move to the Settings tab, set the Location and select Post to apply the fields to it.

Then, on the editing post, you will see the fields but without icons.

3. Getting the icon script

To add icons, I’m going to use icons from the Dashicons library.

Go to this link on wordpress.org, and search for an icon you want.

Then, copy the HTML of the icon to show it in the next steps.

4. Adding icons to the title of custom fields

As I mentioned before, you can create and manage the fields using the UI provided by the Meta Box Builder extension, or using code. No matter which way you are doing, adding icons to the title are quite the same.

4.1. Using Meta Box Builder

This is a field group that I made before. It was created by using the UI.

Now, I will add an icon to the field group title, as well as the titles of all the fields.

To add the icon to the field group title, paste the HTML that we’ve just copied to any place on the title.

Do likewise with the titles of the fields. Just paste the HTML of the icon as you want to the title.

4.2. Using code

We’ll add the HTML to the meta box's title attribute or the field's name attribute.

Here is the original code of a meta box created by Meta Box plugin.

Add and paste HTML script into the line where we set the field group title.

Also paste the HTML scripts of the icons to the lines where we register the name of each field.

5. Displaying the icons

Go to the post editor, you will see the icons displayed besides the field group title and each field title. This is how they look in the backend.

If this field group is also displayed on a page on the frontend, they would display well.

Now, I’ll add a block in the type of Submission Form.

After adding the ID of the field group to this box, the fields will display immediately, obviously along with the icons.

We’ve finished adding the icons. Here is the result on the frontend.