Build Your Own Business Website header image

Agility Icon Content Box

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

The Agility Skin Icon Box is very similar to the Featured Box. This is what it looks like and it has all these features.

Icon Content Box Features

  • Everything is automatically centered
  • It’s got an icon
  • It’s got a post title or page title that you can click on to go to the page
  • It’s got a small excerpt
  • It’s got a read more button

Icon Content Box Settings

Let’s come over and look at the settings for the icon content box. You can set the size of the icon. Let’s say we want to be 64. And you can set the style, so let’s say it’s going to be Circle – negative. Save that and come back over here where we can look at it on a page.

It doesn’t look a lot bigger but it must be because it says that 64 pixels but you can see now it’s a circle instead of a square. If you don’t put anything in here at all it defaults to 48 pixels.

Icon Choices

You have a number of choices. You can choose a plain icon and when you choose that there won’t be any background at all. It’ll just be the icon and it won’t have any color either. It’s going to automatically have just the text color.

If you choose the Circle – positive then it will have a color and a circle around it with the icon inside. And if you choose a Circle – negative then the background is colored and the and the icon is transparent.

If you choose negative the background is colored and the icon is transparent. If you choose positive, the background is transparent and the icon and whatever shape is associated with it is colored.

You’ve also got the rounded corner square. You’ve got a circle square and the rounded corner square both positive and negative that you can choose from. Each one of them obviously can be styled separately.

Read More Button Text

Again, you have control over the read more button. It can say what you’d like so it could be “read more” or “read more about us”. Save that option and there it is. So that’s the way this is set up.

How to Add an Icon to a Page

Let’s choose a page that doesn’t have an icon. Now let’s go back to our rounded square negative. When you’re using an icon box and it doesn’t have an icon it substitutes the question mark.

In order to get an icon there, this is called a page icon, you have to go over to the page and edit it. Then go down to Agility Page Details and enter the page icon here. This is the format that you would put in, like “fa-flag”.

Where to Find Icon Codes

You can find the available codes here. This is Font Awesome, so if we come over and look at their icons you can choose any of these. We could choose a snowflake. If so then all you need is this “fa-snowflake”. You just need that one part you don’t need this “fa” only that one section.

Come back over here to the page and put the icon in. Let’s update it, view the page and now you get that icon.

So that’s how you set the icon for these things. You set it on a page-by-page basis and once it’s on a page the Icon Content Box will automatically take its icon. You know you haven’t set the icon properly yet if you see a question mark. And that’s the Agility Icon Box.

0 Comments… add one
0 comments… add one