Do you wish to have to use icon fonts inside the WordPress publish editor?
Icon fonts mean you can merely use images and logos in text. They’re lightweight and received’t slow down your web site, and they can be merely scaled to any size and styled like each different text font.
In this article, we’ll show you ways you’ll merely use icon fonts inside the WordPress publish editor without writing any HTML code.
We’ll show you a few methods, every one the usage of a moderately opposite direction than the other. You’ll be capable to choose one who works best for you.
Manner 1. Together with Icon Fonts in WordPress Post Editor the usage of JVM Rich Text Icons
This system is really helpful to use on any kind of WordPress web page. It’s easy to use and works seamlessly with the block editor.
First, you need to place in and switch at the JVM Wealthy Textual content Icons plugin. For additonal details, see our step-by-step knowledge on how you can set up a WordPress plugin.
Upon activation, you’ll be capable to simply edit a WordPress put up or web page or create a brand spanking new one. All through the publish editor, add a brand spanking new paragraph block, and likewise you’ll see a brand spanking new Flag icon inside the block toolbar.
Clicking on it’s going to show a popup of icons to choose from. It uses the most popular Font Awesome icon fonts by means of default.
You’ll be capable to use the search to seek for an icon or simply scroll down to hunt out the icon you wish to have, and then click on on so that you can upload it.
One advantage of the usage of icon fonts is that you just’ll be capable to use CSS to style them.
On the other hand, since you are already the usage of the block editor, you’ll be capable to simply use the built-in color tools to style the icons.
The plugin allows you to use icon fonts in most text blocks similar to Paragraph, Tick list, Button, Columns, Quilt, and further.
That is an example of the usage of icon fonts and block possible choices to style 3 columns.
Each different useful example of the usage of icon fonts is with buttons.
This time we’re the usage of inline icon fonts alongside some text for the two buttons.
Feel free to use the block editor tools like text alignment, colors, spacing, and further to get necessarily essentially the most out of the icon fonts.
Manner 2. Add Icon Fonts in WordPress Post Editor with Font Awesome
This system requires you so that you can upload shortcodes inside the publish editor to turn icon fonts. You’ll be capable to use this system will have to you don’t need to perpetually use icon fonts on your WordPress posts and pages.
First, you need to place in and switch at the Font Superior plugin. For additonal details, see our step-by-step knowledge on how you can set up a WordPress plugin.
Upon activation, you’ll be capable to edit a publish or internet web page in WordPress and use the following shortcode so that you can upload a font icon.
[icon name="home"]
The determine parameter that is the determine of the font used by Font Awesome. You’ll be capable to to seek out the entire tick list on the Font Superior cheatsheet internet web page.
Once added, you’ll be capable to preview your publish or internet web page to see how the icon will look on the are living web site because it’s going to not display as an icon inside the block editor.
That’s the manner it appeared on our take a look at web site.
You’ll be capable to use the shortcode inside of a paragraph and inline with other text. You’ll be capable to moreover add it on its own the usage of the ‘Shortcode’ block.
On the other hand, the usage of the ‘Shortcode’ block isn’t going to give you the styling possible choices you’ll get with other text blocks.
You’ll be capable to moreover add the shortcode inside of columns to create a choices row.
It is going to be relatively trickier as you’ll not be capable of see the actual images, and the column heights will keep changing within the editor.
That is how it appeared on our take a look at internet web page. The columns are the identical top, even though they aren’t inside the editor.
You’ll possibly wish to preview your art work in a brand spanking new browser tab time and again to see the way it’s going to look to shoppers.
Manner 3. The use of Icon Fonts with WordPress Internet web page Builders
This system is very good if you’re creating a landing internet web page or designing your internet web page the usage of a WordPress internet web page builder like SeedProd.
SeedProd is the best WordPress internet web page builder to be had available on the market. It allows you to merely create beautiful landing pages or design all of your internet web page.
First, you need to place in and switch at the SeedProd plugin. For additonal details, see our step-by-step knowledge on how you can set up a WordPress plugin.
Upon activation, you’ll be asked to enter your plugin license key. You’ll be capable to to seek out this information underneath your account on the SeedProd internet web page.
Upon getting into your license key and clicking ‘Test Key,’ you’ll be capable to get began running on your landing internet web page.
Simply move to the SeedProd » Landing Pages internet web page and click on on on the ‘Add New Landing Internet web page’ button.
After that, you’ll be asked to choose a template for your landing internet web page.
SeedProd comes with numerous beautiful designs that you just’ll be capable to use as a starting point, otherwise you’ll be capable to get began with a blank template and design all the factor yourself.
For this educational, we will be able to be the usage of a pre-designed template. Simply click on on on a template to choose it and continue.
Next, you’ll be asked to offer a reputation for your landing internet web page and choose a URL.
Upon getting into them, click on on on the ‘Save and Get began Bettering the Internet web page’ button to continue.
SeedProd will now unlock the internet web page builder interface. This can be a drag-and-drop design tool where you’ll be capable to simply stage and click on on on any products to edit it.
You’ll be capable to moreover drag and drop blocks from the left column so that you can upload new parts for your design.
For the sake of this educational, we’re going to add the Icon block.
After you add the block, you’ll be capable to simply click on directly to edit its properties.
The left column will trade to show the selections for the Icon block. You’ll be capable to click on on into the ‘Icon’ segment to the left and choose a definite icon image or trade the color and style.
Differently to use icons in SeedProd is by means of together with the ‘Icon Box’ block.
The variation between this and the ‘Icon’ block we used previously is that ‘Icon Box’ allows you to add text together with your most popular icon.
This is without doubt one of the most no longer ordinary techniques to use icons when appearing product options, services and products, and other items.
You’ll be capable to place your icon box inside of columns, choose colors, and adjust the icon size for your liking.
Additionally, you’ll be capable to moreover format the accompanying text the usage of SeedProd’s formatting toolbar.
Once you may well be finished bettering your internet web page, don’t disregard to click on on on the ‘Save’ button at the best correct corner of the computer screen.
Must you’re ready, you’ll be capable to click on on ‘Put up’ for the internet web page to move are living, otherwise you’ll be capable to click on on on ‘Preview’ to make sure it looks like you wish to have it to.
You’ll be capable to moreover click on on on ‘Save as Template’ so that you’ll be capable to reuse this design with SeedProd on other parts of your internet web page.
That is how the icon fonts appeared on our take a look at internet web page.
We hope this article helped you learn how to use icon fonts in WordPress publish editor without writing HTML code. You may also want to see our WordPress efficiency information to optimize your internet web page pace or the most efficient touchdown web page plugins for WordPress.
Must you appreciated this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You’ll be capable to moreover to seek out us on Twitter and Fb.
The publish How you can Use Icon Fonts in WordPress Put up Editor (No Code) first appeared on WPBeginner.
0 Comments