-
Posts
-
Hi,
I have added a custom social media icon for BookBub. The icon displays, but not properly on most desktop browsers. The icon should be BB in black on a white background but it displays a blank white icon only in Firefox and Safari. However it displays properly in Safari on all mobile devices I have checked it on. And on desktop on Chrome. Here’s the only custom CSS code I have regarding this icon. Can you help me figure this out? Thank you.#top #wrap_all .av-social-link-bookbubicon:hover a {
color: #ffffff;
background: red;
}Susan
you can see here a little guidance on how to use for example a png as social icon and use it like the others:
https://kriesi.at/support/topic/adding-custom-social-icons-3/#post-934964so if that was the code above you want to use – you implemented that new icon by f.e.:
function avia_add_custom_social_icon($icons) { $icons['BookBub'] = 'bookbubicon'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);and how did you implement it to use it as social icon ?
The reason why i ask is : did you realy use on that snippet : bookbubicon as short for the new icon – or bookbub ?because the red underlined part will be the addendum for the social-media class
where did you get that fontello BB
is there a link we can see your page?Here is how I registered the icon in theme functions. And as I said in first post it is displaying correctly in mobile browers so I don’t think it’s becasue I registered it incorrectly.
// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
$icons[‘bookbubicon’] = array( ‘font’ =>’bookbub’, ‘icon’ => ‘ue800’);
return $icons;
}
add_filter(‘avf_default_icons’,’avia_add_custom_icon’, 10, 1);// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
$icons[‘Bookbub’] = ‘bookbubicon’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);the code is so far correct – then i have to inspect the dom and css : either you post a link here so that I can check why this is so, or you have to leave the corresponding data for the mods in the private content – and wait til they find your post
Hi thecszone,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaHi Susan,
https://cl.ly/5d3614c99599 THe icon does not look right, where did you get the font?
Best regards,
VictoriaI created the font at http://fontello.com/ I did the same thing with the Goodreads font and it is working fine.
What browser and device did you look at it on? I have cleared my caches multiple times, and still on a laptop when I use Safari or Firefox the icon is a blank white box instead of two B’s. It works fine on Google Chrome desktop. And it works fine on Silk and mobile Safari just not Safari desktop.
- You must be logged in to reply to this topic.