Notifications
Clear all

wpForo 1.x.x [Solved] My notification Icon does not look like your website

11 Posts
3 Users
3 Reactions
1,366 Views
Posts: 18
Topic starter
(@user)
Eminent Member
Joined: 5 years ago

@robert

One more suggestion .

My notification Icon does not look like your website.

no animation.

 

 

10 Replies
Robert
Posts: 10590
Admin
(@robert)
Support Team
Joined: 9 years ago

@userd,

Your theme has a function which turns all Font Awesome Icons to SVG icons. Please find the Icon to SVG converter option in your theme or maybe in a separate plugin you use and disable it. If you can't find just contact to your theme developers and ask them how to disable the icon to SVG converter function. This function affects all wpForo icons.

Posts: 18
Topic starter
(@user)
Eminent Member
Joined: 5 years ago

My theme has no option.

Can you explain in detail?

which have i need?
do you know about any plugin.

4 Replies
(@user)
Joined: 5 years ago

Eminent Member
Posts: 18
 

My theme has no option.

Can you explain in detail?

which have i need?
do you know about any plugin.

https://illicitrhythm.com/index.php/memberarea/

Please check.

Icon not loading.

Moderator
(@martin)
Joined: 8 years ago

Support Team
Posts: 992

@userd

That's not good. So there is no option to disable this conversion. Please disable all plugins, maybe this function come from some plugin. Then delete all caches and check. If the problem is not soled then you should contact to your theme support and ask them provide some solution to disable "<i> Icon to SVG" converter function.

 

(@user)
Joined: 5 years ago

Eminent Member
Posts: 18

@martin

I've tried using another theme. Giving the same problem.

i thing issue with wpforo.

 

Robert
Admin
(@robert)
Joined: 9 years ago

Support Team
Posts: 10590

Thank you @userd,

wpForo doesn't have <i> to SVG converter so it has no any chance to be wpForo problem. Ok, let's try to deactivate other plugins, delete all cache and test it again.

If we still don't find the SVG converter I'll provide fixing CSS code to style SVG icons.

 

Posts: 18
Topic starter
(@user)
Eminent Member
Joined: 5 years ago
Posted by: @robert

wpForo doesn't have <i> to SVG converter so it has no any chance to be wpForo problem. Ok, let's try to deactivate other plugins, delete all cache and test it aga

@robert

Not working.

Posted by: @robert

If we still don't find the SVG converter I'll provide fixing CSS code to style SVG icons.

I need your Method.

3 Replies
Robert
Admin
(@robert)
Joined: 9 years ago

Support Team
Posts: 10590

Ok, @userd,

That's not good that you couldn't find <i> to SVG converter. I think the theme you used after changing your current theme had also this converter. Or you didn't disable and checked plugins properly. This converter will do many problems for other plugins too.

Anyway, here is a code especially for SVG icons. Put CSS code in top admin bar > Customization > Additional CSS section or in any other Custom CSS code option of your theme. Save it, delete all caches, navigate to forum frontend and press Ctrl+F5 to reset browser cache:

#wpf-widget-profile .wpf-prof-header .wpf-prof-alerts .wpf-bell svg{cursor: pointer; border-radius: 50%; width: 34px;height: 34px;line-height: 31px;text-align: center;background:#f5f5f5; margin: 0 2px 0 0; display: inline-block;font-size: 21px;position: initial; padding:6px;}
#wpf-widget-profile .wpf-prof-header .wpf-prof-alerts .wpf-bell svg:hover{ color: #555;}
#wpforo #wpforo-wrap .wpf-bar-right .wpf-alerts svg{cursor: pointer; display: inline-block;font-size: 21px; position: initial; width: 26px;height: 24px;line-height: 30px;margin: 0;padding-right: 8px;}
#wpforo #wpforo-wrap .wpf-bar-right .wpf-alerts svg:hover{ color: #f5f5f5;}
#wpforo #wpforo-wrap .wpf-bar-right .wpf-alerts.wpf-new svg{fill: #FF812D!important;color:#FF812D!important;}
#wpforo #wpforo-wrap .wpf-bar-right .wpf-alerts.wpf-new svg:hover{text-shadow: 0 0 20px #000;}
#wpf-widget-profile .wpf-widget-alerts.wpf-new svg{fill: #FF812D!important; color:#FF812D!important;}

 

Robert
Admin
(@robert)
Joined: 9 years ago

Support Team
Posts: 10590

Also, please put this css code too. This will fix the Search icon on the menu bar:

#wpforo #wpforo-wrap .wpf-search .wpf-search-form svg{width: 23px;height: 29px;position: absolute;margin: 0 0 7px 0;top: 0;font-size: 16px;line-height: 30px;padding: 0 0 0 7px;z-index: 10;cursor: pointer;vertical-align: baseline;fill:#DD5454;color:#DD5454;}
(@user)
Joined: 5 years ago

Eminent Member
Posts: 18

@robert

Wow! Awesome. Issue solved.

Respect You.