How to Add Blurbs with Icons in WordPress
Do you want to add blurbs with icons to your WordPress website? A blurb is a small bit of text that can be used in a feature or product list or to direct users to parts of your site. They’re often placed in rows or columns. Adding icons to these blurbs can help draw the eye to them with visual content.
To add icon fonts to WordPress, you’ll need to follow these three steps. We’ll install some plugins to make the process easier.
- Step 1. Install the Better Font Awesome and Column Shortcodes plugins
- Step 2. Add columns and text to a post or page
- Step 3. Add Font Awesome icons to the columns
Step 1. Install the Better Font Awesome and Column Shortcodes plugins
Sure, you can create your own icons, but that requires artistic skill or money. Plus, Font Awesome’s vectors scale to all screen sizes, and a visual icon font can be customized with CSS. These simple images will look great on any website.
Font Awesome icons can be added manually, but the process can be tedious. It’s best to use a plugin like Better Font Awesome.
To install this WordPress icon library, go to Plugins » Add New on your admin dashboard. Search for “Better Font Awesome”. Click Install and then go back to Plugins to activate your new addon.
If you need to install a plugin manually, take a look at our guide on accessing WordPress via FTP.
Next up: Column Shortcodes. This plugin can be installed much the same way as Better Font Awesome. Just go to Plugins » Add New, find it, and activate it.
While you can create columns with HTML, it can take a bit of coding. Plus, elements created with Column Shortcodes can be easily adjusted or removed without getting messy.
Step 2. Add Columns and Text to a Post or Page
Now that Column Shortcodes is installed, you should see a button on any post or page with the visual editor. Click this button, and you’ll see a list of column sizes to choose from. If you’re making a list of features, you could use the one-fourth or one-fifth sized columns.
This should add shortcodes that look like this: [one_half]Content[/one_half]
Place your text, images, or other content within those codes — anything you want to appear in that column.
Step 3. Add Font Awesome Icons to the Columns
With columns set up, it’s time to add icons. There are two easy ways to do this: with a button, or with shortcodes/HTML.
Much like with Column Shortcodes, you should see a new button on your visual editor labeled “Insert Icon”. Search for the icon you want! Camera, arrows, or bells; there are hundreds to choose from.
You can also go to Font Awesome’s website and search for free icons. Click one and you’ll see some HTML below the image. Either use this HTML, or note the name of the icon. Use this code to insert the icon with a shortcode instead: [icon name=”download”]
Font Awesome has a guide to styling icons which will allow you to change size, add borders, or even animate them. When using shortcodes, add the codes given (“fa-2x” for example) under a class modifier, such as: [icon name=”download” class=“2x”] This will make a download icon that’s twice as large.
To add the icons to your columns, just put their codes inside the column shortcodes! You may also wish to center the icon, increase its size, or otherwise style it.
And that’s all you need to do to create blurbs with icons!
Create Engaging Blurbs
Everyone loves visual content! It can break up text and highlight important information, so it’s used more than ever in lists of features, products, or services. By combining icons with text, your product or service will seem that much more interesting, and visitors will be more likely to read the whole feature list.
Need some other resources for your small business website? Check out our other articles on how to create a slider with a contact form, adding feature boxes with icons, or how to display featured images in a slider.
If this guide helped you set up your new feature list, please take a look at our Facebook and Twitter pages for even more WordPress plugin tutorials.
Related Posts
