Coloured featured icons

[Mj]

I created a ‘dashboard’ using the featured icons visual composer component. The dashboard looks like: https://www.dropbox.com/s/6e6hn7fd1dt2g5m/Screenshot%202014-10-03%2013.28.50.png?dl=0

I do like to assign a color to each featured icon, but I couldn’t find any way to add a different id or class to the icons. Would this be possible?

[sharmstr]

They are just fonts, so use color

COPY CODE

.icon-megaphone:before {
color: red;
}

obviously change .icon-megaphone to whatever icon it is and color to whatever color you want

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Mj]

I understand, but this changes the icon colors for each button. I do like to have the same icon in different colors.

[sharmstr]

Having different colors for the same icon within the same featured item grid isn’t easy. You’d probably have to edit the shortcode to add a icon color field, or add the colored icons to the drop down list.

If you just want to target the icons in your dashboard without changing the color of the icon sitewide as the css above does, then you can add a class to the Featured Items Grid Settings and use it in your css.

COPY CODE

.my_featured_colors span.feature-icon.el-appear.icon-angle-left {
color: red;
}

.my_featured_colors span.feature-icon.el-appear.icon-align-center {
color: blue;
}

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Mj]

What about these link icons, linked to a different page: http://beatjudge.com/my/
Password: beatcoin

[sharmstr]

What about them?

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

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Mj]

I found a workaround related to my question in the openings post.

I created a three column row with two elements in each column: an icon and HTML text below it. The icon has a 4x font size. The HTML text below has been centered.

Next, I added a custom class to the icons, like bh-1 till bh-6. Finally, the color attribute has been added to the stylesheets. The result: https://www.dropbox.com/s/dbjsdz2e2exs0nr/Screenshot%202014-10-06%2021.55.37.png?dl=0

[Author]

Posts