Icons or images next to block text in their own columns

[rmcgroup]

Hi, I’m trying to replicate the look on this page https://www.thehartford.com/business-coverages in the section of my page naplesinsurancegroup.com/business-insurance. We’re having a hard time figuring out how to put the icon to the left of each block text section without using very negative div values to get the spacing right?

Is there a better way to achieve this without a bunch of customization? I have the columns split into 1/6 sections.

Thanks for your help as always…

[friech]

Hi There,

Thank you for writing in, use the (V2) Headline element, it has a Graphic option. Enable it and you can add an FontAwesome Icon or Image on your headline.

Hope it helps,
Cheers!

[rmcgroup]

I had that setup previously with headline, but I need to add unique icons that are not included with fontawesome. Additionally, it indents the entire headline when I use that method. I’m trying to get the icon (in this case a picture of an icon because fontawesome icons are not applicable to what we’re trying to create), and have the icon hang off to the left of the aligned text.

Does that make sense?

[jade]

Hi there,

Why don’t you use the Classic Feature Box element instead? You should be able to add your own image instead the icon and the alignment of the image and the text should be displayed adjacent to each other by adding this code to the custom CSS:

.x-feature-box {
    display: flex;
}

Then the result should looking something like this:

Hope this helps.

[rmcgroup]

That’s a great solution, thank you!

It’s going to take a bit of CSS to get the title and description text to appear like the descriptions and headings on this page though… http://naplesinsurancegroup.com/business-insurance/

Any recommendations?

[paul.r]

Hi,

You can try adding my-custom-block in the class field of your row elements.

Then add this in Cornerstone > CSS

.my-custom-block .x-container .x-column.x-sm.x-1-6:nth-child(odd) {
    width: 10%;
}

.my-custom-block .x-container .x-column.x-sm.x-1-6:nth-child(even) {
    width: 23.33332%;
}

Hope that helps

[rmcgroup]

Thank you for the info. I could not get the CSS to work when placing it globally (theme options, CSS), and locally (content, page, CSS) within the content area.

Any ideas on what might be going on?

[nabeel]

Hi again,

It looks like you’ve not added the class my-custom-block in the class field of your row element. Once you do that, the css should work as expected.

Let us know how this goes!

[rmcgroup]

Thank you for the help, it’s working great.

Two additional questions?

• How do I change the size of the font within the title to a smaller size and face?
• How do I change the size and color of the font within the descriptions to a larger size and darker color?

Thank you.

[nabeel]

Hi again,

Please make use of the following code:

h1.x-text-content-text-primary {
    font-size: 17px !important;
}
.marginless-columns .x-1-6 .x-text {
    font-size: 20px;
    color: #181843;
}

Let us know how this goes!

[rmcgroup]

Thanks for your reply. Unfortunately the H1’s elsewhere on the page changed, but not the text within the feature box. The colors did not change either.

Is there something else we can try?

Thank you so much.

[nabeel]

Hi again,

Can you please provide the URL of page in question with some screenshots so we can have a better understanding?

Thanks!

[rmcgroup]

It’s the exact same website as mentioned before in this conversation, I had to remove the CSS and switch it back because the site is LIVE and the headers on all my pages (H1’s) couldn’t remain as the smaller size.

http://naplesinsurancegroup.com/business-insurance/

I want to adjust the size of the font in the Classic Feature Box element. The only way I could imagine is by modifying the CSS. Any idea what that looks like? I want to change the font color in the element, and change the font size of the title and the description.

Thanks.

[Joao]

Hi There,

Please add the following code to Cornerstone CSS

.x-feature-box .x-text {
font-size: 20px;
color: red;
}

Hope it helps