Buddyapp Icons are not found in visual composer

[purushotham]

Hi,

I am creating home page and I need to add description about icons used in side bar but buddyapp icons are not available in visual composer. How can I add buddyapp-groups, buddyapp-news and forum icons in Home page?

I also need button effect for icons, Please provide if there is any CSS for the same.

Thanks in advance.

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, so do you want to use the default buddyapp icons at the homepage? Replacing the ones you already have?

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[purushotham]

Yep, I want
1. buddyapp-group icon instead of typicons-group icon
2. forum icon instead of typicons-forum
3. buddyapp-news icon instead of Linecons-news

and also I want mouse hover effect/animation for all the icons, css will be helpful.

[Laura]

Hello, try by adding this to style.css of child theme

COPY CODE

span.vc_icon_element-icon.typcn.typcn-group:before {
    content: "\ea24";
    font-family: icomoon;
}
span.vc_icon_element-icon.typcn.typcn-messages:before {
    content: "\e6f6";
    font-family: icomoon;
}
span.vc_icon_element-icon.vc_li.vc_li-news:before {
    content: "\ea26";
    font-family: icomoon;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[purushotham]

Thank you, this css worked for me.
I am still looking for mouse Hover icon css.

[Laura]

Hello, it’s quite the same for those icons

COPY CODE

span.vc_icon_element-icon.typcn.typcn-group:before:hover {
    content: "\ea24";
    font-family: icomoon;
}
span.vc_icon_element-icon.typcn.typcn-messages:before:hover {
    content: "\e6f6";
    font-family: icomoon;
}
span.vc_icon_element-icon.vc_li.vc_li-news:before:hover {
    content: "\ea26";
    font-family: icomoon;
}

You can use:
color: black;
font-size: 14px;
to change color and size 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[purushotham]

Hi Laura, I tried this but not working. Am i missing anything?
span.vc_icon_element-icon.typcn.typcn-group:before:hover {
content: “\ea24”;
font-family: icomoon;
color: black;
font-size: 14px;
}
span.vc_icon_element-icon.typcn.typcn-messages:before:hover {
content: “\e6f6”;
font-family: icomoon;
color: black;
font-size: 14px;
}
span.vc_icon_element-icon.vc_li.vc_li-news:before:hover {
content: “\ea26”;
font-family: icomoon;
color: black;
font-size: 14px;
}

[Laura]

Hello, try :hover:before
if not working let me know 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[purushotham]

It is still not working, can you please help.

[Laura]

Hello, sure, can you share access? 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[purushotham]

This reply has been set as private.

[Laura]

Hello, this should change the background of the circle when hovered

COPY CODE

.vc_icon_element-inner.vc_icon_element-color-custom.vc_icon_element-have-style-inner.vc_icon_element-size-lg.vc_icon_element-style-rounded.vc_icon_element-background.vc_icon_element-background-color-custom:hover {
    background: red !important;
}

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[purushotham]

That worked like a charm, thank you very much.

[Laura]

Glad to help! If you can rate us 5 stars at themeforest that would help a lot 🙂

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

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Author]

Posts