-
AuthorPosts
-
March 18, 2020 at 11:51 am #1194075
Hi everyone!
I’ve got an issue regarding the social media icons. I’d like to add the social media icon of “Kununu” with the specific hyperlink. How is that possible?
Thanks a lot!
AchheeMarch 18, 2020 at 12:55 pm #1194091See documentation here too:
https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-optionsif there are not too many individual social icons, I would recommend not to use font icons, but to use images (png’s) instead
For this you would have to find a suitable image file for the icon – e.g.:
the whole thing is possible as circle too:To Register the new Icon on Enfold put this to your child-theme functions.php
function avia_add_custom_social_icon($icons) { $icons['Kununu'] = 'kununu'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
Now you can add on Enfold-Child Options – Social Profiles – the new icon ( it is at the end of the list : link maybe: https://www.kununu.com/ )
to have now the image for that new icon
you had to place this to your quick css
(the image dimensions depends on your other settings for social media icons – standard seem to be 30px):#top #wrap_all .av-social-link-kununu a:before{ content: ""; width: 30px; height: 30px; float: none !important; display: inline-block !important; vertical-align: middle; background: url(PATH-TO-YOUR-IMAGE/kununu-quad.png) no-repeat center center; background-size: contain; } /**** hover style - just an example - if you make the image a bit smaller - you can style background-color ***/ #top #wrap_all .av-social-link-kununu:hover a { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg) }
see here in my footer the example: https://webers-testseite.de/#footer
March 18, 2020 at 1:08 pm #1194093or take only the white sings as png files and style the background-colors for them.
Guess normal logo color of them is: #99c612March 19, 2020 at 5:27 am #1194306Hi,
Thanks for helping out @guenni007, did you have any luck with that @achhee?
Best regards,
RikardMarch 19, 2020 at 11:15 am #1194367Hi Rikard,
not yet because I need the icon in the same style as my others…
could you maybe help out?Best regards
achheeMarch 19, 2020 at 4:16 pm #1194445This workout i would only do if i had to add more than one icon to my enfold.
you can upload a svg file to fontello icon : http://fontello.com/
these svgs had to be monochrome – and sometimes do not work correct in fontello because of svg spezicications ( compound path etc. )
then activate these generated font-icons and name the font – then download.
here is that fontello generated zip
https://webers-testseite.de/fontello-bdbd84bd.zipgoto your Enfold-Child – Import/Export and upload that zip to your Enfold via : Icon Font Manager.
Because i named the font : kununu the font-family is then the same kununufunction avia_add_custom_social_icon($icons) { $icons['Kununu'] = 'kununu'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1); // Register new icon as a theme icon function avia_add_custom_icon($icons) { $icons['kununu'] = array( 'font' =>'kununu', 'icon' => 'ue800'); return $icons; } add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);
Styling : depends on you.
#top #wrap_all .av-social-link-kununu:hover a{ color:#fff; background-color:#99c612; }
March 23, 2020 at 5:50 pm #1195540First of all: thank you! But is it possible to create a Child-Theme? Or is it enough to place to code you’ve mentioned in the regular theme-editor of enfold (parent-theme).
March 23, 2020 at 7:19 pm #1195558*Is it necessary to create a Child-Theme….
March 24, 2020 at 9:14 am #1195699Hi,
If you place the PHP code in the parent theme then it will be overwritten on updates, so a child theme is recommend. If you want to download a child theme then you can do so here: https://kriesi.at/documentation/enfold/install-enfold-theme/#why-child-theme. The CSS will be safe on updates though if you place it Quick CSS.
Best regards,
RikardMarch 24, 2020 at 12:15 pm #1196094Nice, thanks! One last question: where can I find the quick CSS? Is it the ‘stylesheet.css’ or where is it located?
March 24, 2020 at 5:21 pm #1196914March 24, 2020 at 5:29 pm #1196920ok, thanks. Now I’d like to import a Kununu social media to the Icon-selection. I tried to load it up in fontello, but it doesn’t shows the icon. I think fontello isnt able to read the svg. Maybe @Guenni007 is able to tell me how it works. I’ve already tried to solve the issue by reading the fontello wiki about svg’s but I failed…
March 24, 2020 at 5:53 pm #1196940Hi achhee,
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,
VictoriaMarch 24, 2020 at 6:06 pm #1196948Hi, I think you didn’t understand my issue. Thing is that with my social media icons everything is fine. I just need an introduction regarding the upload of the Kununu icon (actually in png and already converted into svg) to fontello. The other steps are clear to me. Maybe you can send me a working svg of the Kununu icon via email or here? Thanks!!
March 25, 2020 at 11:35 am #1197633I solved the problem… :)
March 25, 2020 at 11:40 am #1197636Hi,
Glad you figured it out! :)
For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/
If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)
Best regards,
Yigit -
AuthorPosts
- The topic ‘Individual social media icons’ is closed to new replies.