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.

[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

[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

[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

[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

[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

[purushotham]

Hi,
Here is the access detail.
Username: masterlearn
password: Eassypass#11

[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

[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

[Author]

Posts