How to create Icons with containers without hover effect

[celeteweitz]

Hi Support,

I am trying to create solid background icons with containers and no hover effect. I have attached an image file for your reference. The url where you can find the example is http://getclouder.com

regards
celeste

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
You can create icons through icons shortcode. Dante includes the Swift Framework Shortcode Generator, which is a custom built feature for our themes. The generator allows you to embed shortcodes within your content quickly without having to remember the syntax. The generator allows you to select the type from the list, and provide parameters (if needed).

You can find the shortcode generator within the WordPress WYSIWYG editor.
Thanks
Mohammad

[celeteweitz]

My apologies, the question was something different, I Know how to use shortcodes, so thank you for the information provided.

I asked, is there any way, I can have a solid background color for the icon container along with white color for the icons. In other words, the background and hover to be the same without any hover effect, or the normal state should be the hover state, either way you interpret it.

regards
celeste

[Mohammad – SUPPORT]

Hi,
Please create icons and use this custom css code:-

.sf-icon-cont .sf-icon {
    color: #ffffff !important;
}
.sf-icon-cont {
    background: none repeat scroll 0 0 #4ad1e5 !important;
    border: medium none !important;
}

Thanks
Mohammad

[celeteweitz]

thnx for the response.

I have a question, the solution provided by you will set the background color same for all the icon containers, how to have different background colors for different icons.

Regards
celeste

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide the url of the page where you have these icons?
Did you used the Page Builder or the shortcode element to create the icons?

-Rui

[celeteweitz]

This reply has been marked as private.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.sf-icon-box.sf-icon-box-standard {
  pointer-events: none;
}

– Kyle

[celeteweitz]

Hi Kyle,

Well I wanted the effect to be the container with solid colors and the icon to be of #fff. I have attached a pictorial representation. Is this possible.

regards
celeste

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try this:

.sf-icon-cont.sf-icon-icon-three {
  background-color: #0e83cd;
}

You will have to duplicate the css for each icon color, for e.g. sf-icon-icon-two, sf-icon-icon-four etc.

For the icon use this:

.sf-icon-icon-three.sf-icon-cont, .sf-icon-icon-three > i, i.sf-icon-icon-three {
  color: #ffffff;
}

– Kyle

[celeteweitz]

Hi Kyle,

Thanks for the prompt reply and help, it worked. Just one more question:

How to stop hover effect for the icon shortcodes?
I am using the Medium icons and I tried

.sf-icon.sf-icon-medium {
 pointer-events: none;
}

But it did not worked

[Kyle – SUPPORT]

You got a link?

– Kyle

[celeteweitz]

Hi Kyle,

Sure, you will find the chat icon within a circular container on the home page: http://martmill.com/home below where it says ‘Support Options’.

regards
celeste

[Kyle – SUPPORT]

.sf-icon-cont {
  pointer-events: none;
}

– Kyle

[celeteweitz]

Hi Kyle,

Awesome, thnx a lot. You just made my day.

Can u believe I was stuck on this for the past 15 days!!!
whoa, I can’t believe, that it got resolved.

U guys rock, no doubt. Awesome support.

regards
celeste