Change colour of icons and size

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!

Comments

  • Hi,
    It's font size 20px because the icons are fonts, to change the color you would need custom css.
    thanks
  • Thanks you!
  • 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
  • I would need a link to the website to target the class.
    Please send it and also tell me where the icons are.

  • http://dev.mediainabox.nl/

    They are on the frontpage under the Revolution Slider. 

    Thanx in advance!
  • Use this CSS 
    .icon_box .icon_wrapper, .icon_box a .icon_wrapper {
    color:red !important;
    }
     Replace the red color with any you want.
  • 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 


  • Sorry but this is not possible.
  • okay. Thanx for all the help!
  • edited 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}
Sign In or Register to comment.