Change colour of icons and size

FabianAkker · March 2017

Hello! I love the standard icons that comes with BeTheme. I have 2 questions about these icons

- What is the size of these icons. i want to create some of myself and I want to match the size.

- How do you change the colour of the standard Icons? By default they are blue and I want to change them.

Thanks in advance!

Bryan · March 2017

Hi,

It's font size 20px because the icons are fonts, to change the color you would need custom css.

thanks

FabianAkker · March 2017

Thanks you!

FabianAkker · March 2017

Hopefully some this discussion is still open.
I am total inexperienced in this.

What is the code I need in the custom css. I know where to find it. I have the color code.
Now I need to know the exact code for this to work.

Can anybody help me

Bryan · March 2017

I would need a link to the website to target the class.
Please send it and also tell me where the icons are.

FabianAkker · April 2017

http://dev.mediainabox.nl/

They are on the frontpage under the Revolution Slider.

Thanx in advance!

Bryan · April 2017

Use this CSS
.icon_box .icon_wrapper, .icon_box a .icon_wrapper {
color:red !important;
}

Replace the red color with any you want.

FabianAkker · April 2017

Okay. Thank you very much. I have tried it and it works.

Just one last question. I put this code into the Custom CSS at the bottom of the MuffinBuilder.
I have tried to put it in the Custom CSS of the Icon Box it self, so that I can change the color of the individual icon's. But this doesn't work.

Is it possible to change the color of the individual icons? And how to do this.

I am terribly sorry for all the questions. I am total inexperiened with building websites and I am learning everyday thanx to the muffinbuilder

Bryan · April 2017

Sorry but this is not possible.

FabianAkker · April 2017

okay. Thanx for all the help!

lulugoh · December 2017

I have a lot different project (which I used portfolio to do each webpage) and I need different color for icon in each project.

So I've tried to put this CSS under a single new portfolio Muffin Builder and it's working!

Thanks for sharing~!

Copy this and put under a column in Muffin Builder and change "#XXXXX" to the color you want:

______________________

<style>

.icon_box .icon_wrapper, .icon_box a .icon_wrapper {

color:#2eb0b8 !important;

}

.icon_box:hover .icon_wrapper i { background-color: transparent !important; }

.icon_box:hover .icon_wrapper::before { background-color: #e5e5e5 !important; }

</style>

______________________

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}

Change colour of icons and size

Comments