Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #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!
    Achhee

    #1194091

    See documentation here too:
    https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options

    if 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

    #1194093

    or take only the white sings as png files and style the background-colors for them.
    Guess normal logo color of them is: #99c612

    #1194306

    Hi,

    Thanks for helping out @guenni007, did you have any luck with that @achhee?

    Best regards,
    Rikard

    #1194367

    Hi Rikard,
    not yet because I need the icon in the same style as my others…
    could you maybe help out?

    Best regards
    achhee

    #1194445

    This 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.zip

    goto 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 kununu

    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);
    
    // 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; 
    }
    #1195540

    First 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).

    #1195558

    *Is it necessary to create a Child-Theme….

    #1195699

    Hi,

    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,
    Rikard

    #1196094

    Nice, thanks! One last question: where can I find the quick CSS? Is it the ‘stylesheet.css’ or where is it located?

    #1196914

    Hi achhee,

    Quick css can be found in the Theme options > General Styling all the way at the bottom:
    Image 2020-03-24 at 17.20.27.png

    The styles.css is a css file in the child theme.

    Best regards,
    Victoria

    #1196920

    ok, 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…

    #1196940

    Hi 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,
    Victoria

    #1196948

    Hi, 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!!

    #1197633

    I solved the problem… :)

    #1197636

    Hi,

    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

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Individual social media icons’ is closed to new replies.