Displaying Edit Entry and Delete Entry links as icons

By default, GravityView shows Edit Entry and Delete Entry fields as text links. If you want to show the fields as icons, then you're in the right place!

We'll change the Edit Entry and Delete Entry field settings to show HTML instead of text. The HTML will show an icon using WordPress's built-in icon set called Dashicons.

Here's what we're going to change:

We are going to change these text links to icons

Screenshot of the Edit Entry and Delete Entry as shown on the front-end; they are text links

First, edit the View you want to update

The Edit View View Configuration screen in the Admin

Click on the gear icon next to Edit Entry

The Edit Entry gear icon being clicked

Modify the Edit Entry settings to use a pencil icon instead of text

The Edit Entry settings being updated

Use the following code for the "Edit Link Text" field:

<i class="dashicons dashicons-edit" title="Edit Entry" style="color: #dda100;"></i><br>
				

The style="..." part will make the icon yellow. If you prefer to leave it the original color, you can delete that part.

Close the Field Options box

The Close button being clicked

Next, let's update the Delete Entry field settings

The Delete Entry field options gear icon being clicked

Modify the Delete Entry field to show a trashcan icon instead of text

The Delete Entry "Delete Link Text" setting being updated

Use the following code for the "Delete Link Text" field:

<i class="dashicons dashicons-trash" title="Delete Entry" style="color: #a00;"></i>
				

The style="..." part will make the icon red. If you prefer to leave it the original color, you can delete that part.

Close the Field Options box

The Close button being clicked

Click Update to save the View

The Update button being clicked

None of this will matter if we don't save the View!

And now you see the icons instead of the text

The front-end now showing Edit Entry and Delete Entry links as icons instead of text

If the icons aren't visible, install this plugin: Frontend Dashicons, and they will be visible.

Want to use different icons?

Dashicons home page with the icon name circled and an arrow pointing to the circled text

Visit https://developer.wordpress.org/resource/dashicons/ and then click on the icon you want. The icon will appear bigger on the page, and the icon's name will show next to it. We have circled the name of the icon in the example shown.

Replace dashicons-trash or dashicons-edit in the examples above with the new icon name and you will see that icon instead. Don't delete the dashicons value, though! Using the example above should look like class="dashicons dashicons-no".

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us