Method 2: Adding Icons to WordPress Using Dashicons

The Font Awesome plugin isn’t the only way to add icons to your WordPress site. WordPress has its own icon font called Dashicons, used in the WordPress dashboard and block editor. You can use Dashicons on the front end of your website by enqueuing them in your theme’s functions.php file. This method is more advanced and involves editing code, so caution is advised.

How to Add a Download Button with Timer in WordPress

Developed by Raju Digital Services

1. Open Your Theme File Editor:
   • Log in to your WordPress dashboard and navigate to Appearance > Theme File Editor.
2. Add a Code Snippet to Your functions.php File:
   • By default, the theme file editor will open your stylesheet. Click on the Theme Functions (functions.php) file.
   • Scroll to the bottom of the file and add the following code snippet:
   function my_theme_styles() {
       wp_enqueue_style( 'dashicons' );
   }
   add_action( 'wp_enqueue_scripts', 'my_theme_styles' );
   

   • Click Update File to save your changes.
3. Copy HTML for an Icon from the Dashicons Library:
   • Visit the Dashicons library and select the icon you want to add to your site.
   • Click on the icon and then click Copy HTML.
4. Insert the HTML Snippet Where You Want the Icon to Appear:
   • Go to the post or page where you want to add the icon.
   • Add a Custom HTML block and paste the HTML snippet you copied from the Dashicons library.
5. Preview Your Post or Page:
   • Preview the post or page to ensure the icon appears correctly.

Example

Here’s an example of how to enqueue Dashicons and use them in your content:

1. Enqueue Dashicons:
   • Add the following code to your functions.php file:
   function my_theme_styles() {
       wp_enqueue_style( 'dashicons' );
   }
   add_action( 'wp_enqueue_scripts', 'my_theme_styles' );
   

2. Add HTML Snippet:
   • Copy the HTML for the desired icon from the Dashicons library.
   • Insert it into a Custom HTML block in your post or page.
3. Preview:
   • Check the front end of your site to see the icon in action.

By following these steps, you can easily incorporate Dashicons into your WordPress site, enhancing its visual appeal and functionality.

Method 3: Using Icon Fonts with SeedProd (More Customizable)

For those seeking flexibility to use font icons anywhere on their site, a page builder plugin like SeedProd is an excellent choice. SeedProd is a top-tier drag-and-drop WordPress page builder that includes over 1400 built-in Font Awesome icons and a ready-made Icon block that can be added to any page effortlessly.

1. Install SeedProd Plugin:
   • Begin by installing and activating the SeedProd plugin. Refer to our beginner’s guide on how to install a WordPress plugin for detailed instructions.
2. Activate and Verify License:
   • After activation, go to SeedProd » Settings and enter your license key, which can be found in your SeedProd account. Click the ‘Verify Key’ button to proceed.
3. Create a New Landing Page:
   • Navigate to SeedProd » Pages and click the ‘Add New Landing Page’ button.
   • Choose a template from over 300+ professionally designed options. Hover over your desired template and click the ‘Checkmark’ icon to select it.
   • Enter a name for your custom page. SeedProd will generate a URL based on the title, but you can customize this URL as needed.
   • Click ‘Save and Start Editing the Page’ to proceed.
4. Customize the Page Layout:
   • Use the SeedProd drag-and-drop page builder, which provides a live preview on the right and block settings on the left.
   • Drag and drop blocks like buttons, images, contact forms, countdowns, social media sharing buttons, and more onto your layout.
   • Click any block to customize it using the left-hand menu settings. You can adjust background colors, add images, change color schemes, and modify fonts to match your brand.
5. Add an Icon Font:
   • Find the ‘Icon’ block in the left-hand column and drag it onto your layout. SeedProd will display an ‘arrow’ icon by default.
   • To select a different Font Awesome icon, click the Icon block and then hover over the icon in the left-hand menu. Click the ‘Icon Library’ button to browse and select from the available icons.
6. Customize the Icon:
   • After selecting an icon, use the left-hand menu to adjust its alignment, color, and size.
   • Add a link to the icon by entering the URL in the ‘Link’ field.
7. Use the Icon Box:
   • For adding icons next to text (ideal for feature boxes), drag the ‘Icon Box’ from the left-hand menu onto your layout.
   • Click to select the block and change the icon following the same steps as above.
   • Add your header and body text, and customize the block’s spacing, text color, and CSS animations from the ‘Advanced’ tab.
8. Finalize and Publish:
   • Continue customizing your page by adding more blocks and adjusting them as needed.
   • Once satisfied with your design, click the ‘Save’ button and select ‘Publish’ to make the page live.

By using SeedProd, you can create highly customized pages with font icons, enhancing the visual appeal and functionality of your WordPress site.