Source: https://divicake.com/blog/replacing-divi-blurb-icon-with-font-awesome-icon/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # Replace the Divi Blurb Icon With a Font Awesome Icon: A Step-by-step Guide By Divi Cake·7 November 2023·Updated 8 November 2023·4 min read The Font Awesome icon library has all kinds of icons that you can use on your website. We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Start by linking Font Awesome with Divi](https://divicake.com#start-by-linking-font-awesome-with-divi) - [Assign a custom CSS class to your Blurb module](https://divicake.com#assign-a-custom-css-class-to-your-blurb-module) - [Enable use icon and simply choose any random icon](https://divicake.com#enable-use-icon-and-simply-choose-any-random-icon) - [Apply jQuery code snippet to remove the current icon and replace it with a new one](https://divicake.com#apply-jquery-code-snippet-to-remove-the-current-icon-and-replace-it-with-a-new-one) - [Part of the JQuery code snippet that you should change](https://divicake.com#part-of-the-jquery-code-snippet-that-you-should-change) - [What’s going on in the jQuery code snippet?](https://divicake.com#whats-going-on-in-the-jquery-code-snippet) - [Conclusion](https://divicake.com#conclusion) Many [Divi](https://divicake.com/go/divi/) users know that the icons in the Divi Blurb module are quite limited. You can put your own pictures or icons in SVG or PNG format, but sometimes you want more choices. In this guide, we’ll show you how to easily replace the default [Divi Blurb module](https://divicake.com/go/how-to-add-advanced-hover-effects-to-divis-blurb-module-using-hover-css/) icon with a [Font Awesome icon](https://divicake.com/blog/how-to-add-font-awesome-to-divi/). With our step-by-step instructions, you’ll be able to give your Divi Blurb modules a fresh look and access a wide range of new and exciting symbols. No more restrictions, just more icon options to make your website stand out! ## Start by linking Font Awesome with Divi As this guide focuses on replacing the default Divi Blurb icon with a Font Awesome icon, your initial task is to confirm the integration of Font Awesome into your [Divi](https://divicake.com/go/divi/) website. We’ve previously provided a detailed guide on [adding Font Awesome Icons to Divi](https://divicake.com/blog/how-to-add-font-awesome-to-divi/). Once you’ve completed that setup, you’re ready to move on to the next steps. ## Assign a custom CSS class to your Blurb module Next, head over to the specific Divi Blurb module you want to customize. Access its settings and navigate to the ‘Advanced’ tab, then open the ‘CSS ID & Classes’ toggle. This is where you can define your custom class. It’s crucial that the class you set here matches the one used in your code snippet. In our example, we’ve used the class “dc-blurb-icon” so be sure to add the same class here. Using this custom class ensures that the changes you make with your code only impact the element you want to modify, leaving other elements unaffected. Read More: [Fixing Divi Bugs: Effective Solutions and Troubleshooting](https://divicake.com/blog/fixing-divi-bugs-solutions-and-troubleshooting/) ## Enable use icon and simply choose any random icon The [Divi Blurb module](https://divicake.com/go/how-to-add-advanced-hover-effects-to-divis-blurb-module-using-hover-css/) typically starts with an image as its default setting. To change this, navigate to the “Image and Icon” section within the Content tab and switch on the “Use Icon” option. Now, it’s important to note that to replace the icon, you first need to select any icon – it doesn’t matter which one you choose. The crucial step is to actually click on one since there won’t be a pre-selected icon by default. Enable the use icon button and simply choose any random icon of your choice for the Divi Blurb module. Selection of icon for Divi Blurb Module ## Apply jQuery code snippet to remove the current icon and replace it with a new one Now, it’s time to replace the existing icon in the [Divi Blurb module](https://divicake.com/go/how-to-add-advanced-hover-effects-to-divis-blurb-module-using-hover-css/) with the one from [Font Awesome](https://divicake.com/blog/how-to-add-font-awesome-to-divi/). To achieve this, we’ll need to utilize the provided jQuery snippet. [](https://drive.google.com/file/d/1cpJ054MWbFX2jpXOlD40d7FAVjgyrdGb/view?usp=sharing) Note: Please click on the image to copy the jQuery Code Snippet paste the above code in your Divi>Theme Options>Integrations tab in the “Add code to the < head > of your blog” code area as shown below: Replacing the current Divi Blurb module icon with the Font Awesome icon can be achieved by making the use of jQuery snippet. Pasting the jQuery Code at Divi Theme Option ## Part of the JQuery code snippet that you should change The only part of this jQuery snippet that you should change is between the tag. Notice in this example the icon code copied from Font Awesome is , Whenever you wish to use a Font Awesome icon, simply copy the code for that specific icon and insert it by following the mentioned method. To find this code, go to the [Font Awesome website](https://fontawesome.com/) and find the icon that you want to use. From there you will see the HTML code and you can just click to copy it. ## What’s going on in the jQuery code snippet? In the jQuery code snippet the “remove()” line is responsible for taking out the default icon that’s in the blurb module. Following that, we’re using “prepend” to position our Font Awesome icon in the very same spot where the default icon was previously situated. Now, let’s take a quick look at what we’ve accomplished thus far. The icons that are available in the Divi Blurb module are very limited. Divi blurb module with default icon You can add professionally designed icons into your site free of cost using Font Awesome Divi blurb module with custom font awesome icon ## Conclusion To sum it up, this guide has walked you through the process of enhancing your Divi website’s uniqueness. You can do this by replacing the ordinary icons in the Divi Blurb module with Font Awesome icons. This modification breathes new life into your website, giving it a fresh and distinctive look. The steps provided are clear and straightforward, allowing you to select from a vast array of fresh icons. This approach offers you the freedom to choose an icon that perfectly complements your website’s style and message. It’s an excellent method to [make your website stand](https://divicake.com/blog/mastering-divi-for-better-web-design/) out and infuse some extra style into your design. Read More: [Fixing Divi Bugs: Effective Solutions and Troubleshooting](https://divicake.com/blog/fixing-divi-bugs-solutions-and-troubleshooting/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)