Trouble with adding a simple icon and text

[LindaK816]

Hi Support – it appears it’s going to take some time to learn Visual Composer.  I am familiar with other similar editors like the Charity Hub Page Builder.  Currently I am just trying to add a simple icon with text and I can’t get them to display side by side.  There is an added paragraph break after the icon.  Here’s the sample code:

[vc_icon icon_fontawesome="fa fa-envelope-o" background_style="rounded"]Email Us At:  Board@Treyburn.org

Thanks for your help!

Linda

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, use two columns, one for the icon and one for the text 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[LindaK816]

Hi Laura – thank you for your reply. I was trying to add some columns but I do not see how to do that using the default editor. When I click on KLEO/Content Elements – there isn’t an option for columns, although I see Grid Container – is that what I use?

Thank you,
Linda

[LindaK816]

Update – so I tried using the Grid Container but I am having problems with figuring out how to control the column widths. This code provides two columns of equal width. I would like the left column to be perhaps 10% – just enough width to hold an icon. Here’s my code:

[kleo_grid type=”2|3|4|5|6″ animation=”yes”][kleo_feature_item][vc_icon icon_fontawesome="fa fa-envelope-o" background_style="rounded"][/kleo_feature_item][kleo_feature_item]Email Us At: Board@Treyburn.org[/kleo_feature_item][/kleo_grid]

Thank you for your help!
Linda

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

Did you have tried to divide the main row first ? in inside columns to add the icon and the texts?

http://www.wpfy.me/wp-content/uploads/2015/02/Visual-Composer-Row-Layouts.png

Example using divided row, in the bottom part it’s how they are rendered.

This it’s my entire used shortcode

COPY CODE

[vc_row][vc_column width="1/4"][vc_icon][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][vc_column width="1/4"][vc_icon][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][vc_column width="1/4"][vc_icon][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][vc_column width="1/4"][vc_icon][vc_column_text]I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.[/vc_column_text][/vc_column][/vc_row]

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[LindaK816]

Hello Radu – thank you for your reply and sorry for the delay! I was away on vacation. Is there a way to display the ICON and then have the text block right next to it. I have uploaded an image to show what I am trying to do. Thanks! Linda

Attachments:

You must be logged in to view attached files.

[Radu]

Hi,

Use the Kleo Icon element it haves option to place a text left or right of the icon

Example shortcode : [kleo_icon icon="adn" text="This is a dummy text" text_position="right"]

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[LindaK816]

Thank you – that was very helpful! All set : )

[Radu]

You’re welcome
Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts