icon boxes - centralize, background

TheoMQ · August 2016

I would like to centralize the Icons in the Icon boxes (for example the camera-icon or world-icon),

remove the lightgray lines in the background and

set the background color (when not hover).

http://vivify-your-day.com/sport/passion

How can that be done?

Albert · August 2016

Icons are already centered but if you mean to move them up a little bit more, then you need to use custom css:

.icon_box .icon_wrapper { line-height: 95px !important; }

But to remove lines and change bg color, please use:

.icon_box .icon_wrapper { background-color: #000 !important; background-image: none !important; }

TheoMQ · August 2016

Thank you very much for the quick answer!

Works perfect

Albert · August 2016

You are welcome

mattsc859 · September 2016

Hi,

How can I resize the icon boxes (I would like them smaller, and closer together..) with custom css?

I have tried to use an alternative of just icons but these end up being vertical and without links.

thankyou:

http://185.123.97.227/~capita72/refugeethefilm.com/

https://postimg.org/image/ot8635ydt/

mattsc859 · September 2016

(when just using icons and they go vertical I have been using the icon bar shortcode)

Albert · September 2016

@mattsc859 To decrease the size of icon boxes, you need to use the following css:

.style-simple .icon_box .icon_wrapper { font-size: 50px !important; }

However, the icons can not be closer together as icons are in 1/5 columns that has fixed width and this couldn't be changed.

mattsc859 · September 2016

Thank you for this information.

If I wanted to use the icon bar instead with links, how can I make them in a horizontal row? And how can I make them links?

There are no break spaces but still they are vertically.

This is an example of the current shortcode on them, but the link does not work:

[icon_block icon="icon-twitter" color="white" size="45" link="http://www.instagram.com"]

http://185.123.97.227/~capita72/refugeethefilm.com/

Albert · September 2016

To make them links, you need to set link attribute just like you did it above. For more details about Icon Bar items, we recommend to check http://themes.muffingroup.com/be/theme/shortcodes/typography/#iconbar where everything was explained. The item you used is not ICON BAR and that's why it's not horizontal so please use ICON BAR and you will get what you need.

icon boxes - centralize, background

Comments