Social icon from image in top bar - Support | Kriesi.at

Tagged: add, icon, image, PNG, replace, social, social icon

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
May 16, 2017 at 4:46 pm #794098
Blue_Bear
Participant
Hi enfold team,

This time I try to put some custom icon on the top bar. The custom icon are in png (as i cannot add a svg in the media library). I try to follow two methods that you advice but it’s not working… Do you have an idea ?

1st method : http://kriesi.at/documentation/enfold/custom-social-icons/

I put the code in functions.php and i have acces to the icon in the social profil manager but when I apply the css it’s not working…
```
// Changer les icones socials———————–*/
// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
	$icons['picto mail-01'] = 'picto-mail-01';
	$icons['picto insta-01'] = 'picto-insta-01';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
```
```
#top #wrap_all .av-social-link-picto-mail-01 a:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-mail-01.png) no-repeat center center;
    background-size: contain;
}
#top #wrap_all .av-social-link-picto-insta-01 a:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-insta-01.png) no-repeat center center;
    background-size: contain;
}
```
2nd method:: https://kriesi.at/support/topic/custom-social-media-icons-5/
```
#top .social_bookmarks li:hover a {
    background: transparent !important;
}
#top .social_bookmarks li a:before{
    content: "";
    display: block;
    width: 20px;
    height: 20px;
}
#top .social_bookmarks li.social_bookmarks_picto-mail-01 a:before {
    background: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-mail-01.png) center center no-repeat;
    background-size: contain;
}
#top .social_bookmarks li.social_bookmarks_picto-insta-01 a:before {
    background: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-insta-01.png) center center no-repeat;
    background-size: contain;
}
```
I came back to the custom icon from fontello and flaticon while I foudn a solution for this problem.

Thank you very much !
Best regars,
Clement
May 16, 2017 at 8:43 pm #794441

Yigit
Keymaster

Hey Clement,

I checked your website, the code you inserted in functions.php file is correct and icons show up fine on my end. Have you figured it out already? :)

Best regards,
Yigit

May 16, 2017 at 10:10 pm #794502

Blue_Bear
Participant

Hi Yigit,

Lol no, this was the previous solution I used but the webdesigner insist that we use his picto rather than flaticon and fontello picto… That’s why I need a way to put the png instead of the icons from fontello and flaticon…

I set up the previous solution before asking you.

Thanks,
Clement

May 17, 2017 at 9:36 pm #795097

Basilis
Inactive Moderator

Hi,

Have you tried to replace the icon class, with the CSS content: rule?
It is been used to replace icons with an image for example

Best regards,
Basilis

May 17, 2017 at 11:12 pm #795144
Blue_Bear
Participant
Hi Basilis,

OOohhhh now I understand !! thanks for the advice :) Before I used the CSS content: without understand what I did…
Now that’s I understand a bit more I try this :
```
#top .social_bookmarks li.social_bookmarks_flaticon-ig a:before {
content: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-insta-01.png);
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}
```
wich works but the result isn’t beautiful… certainly cause of the picto itself….

If I can push my luck and ask which way is the better way to add a hover effect on it ? With a filter or simply design another image ?
If not I understand :)

Thanks a lot anyway !
Clement
May 18, 2017 at 2:56 pm #795920

Victoria
Inactive Moderator

Hi Clement,

Looks like you got it all working! Or do you still need some help?

If you need further assistance please let us know.
Best regards,
Victoria

May 18, 2017 at 3:50 pm #795960

Blue_Bear
Participant

Hi Victoria,

It’s ok thanks a lot once again, you can close the topic.

Best regards,
Clement

May 19, 2017 at 5:19 am #796302

Rikard
Keymaster

Hi,

Gread, glad you got it working. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts