Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #97599
    Fabio
    Participant

    Hi again,

    In the demo I saw that you had a drop down menu of Social Icons (Facebook, Pinterest, Twitter, etc), this was located right beneath the search icon on the top right located in Menu area in the header. How do you activate these?

    Thanks!

    #97605
    Pratik
    Participant

    Hi Fabio,
    Do you mean Search and social icons on left side above slider? For that, follow following steps:
    1. Add social menu. More info: here
    2. Assing that menu as Header Social Menu in Apperance=> Customize=> Menu=> Menu Location

    Then, social menu will appear below the search button.

    Let me know if you need further help.

    Regards,
    Pratik

    #99404
    makintour
    Participant

    Hi there!
    Where stored this icons?
    How can I change them and add new?
    Also I need to share the ok.ru and my.mail.ru links. Theme haven’t icons for rhis social networks and I want to add them.

    #99405
    Pratik
    Participant

    Hi @mankintour,
    Those icons are not present, you will need to do some custom work for those.

    Social Icons are from genericons. Check https://genericons.com/

    Regards,
    Pratik

    #99407
    makintour
    Participant

    In which files i need to do custom work?
    You done great work for protect from understanding where what in your code )

    #99408
    Pratik
    Participant

    Hi @makintour,
    You just need to add the images for the social network in your server and the CSS with respect to the links of the social icons. You will need indept knowledge of CSS. Then, just add the CSS in “Appearance=> Customize=> Theme Options=> Custom CSS” box.

    If you do not understand what I mean, then it is probably a good idea to hire a customizer.

    Regards,
    Pratik

    #99410
    makintour
    Participant

    ok, thanks!
    I have some knowledge of CSS and try this.

    #99411
    makintour
    Participant

    But i not understand how icons appear if not present in files. Its some outer links? Its mb trouble.

    #99412
    Pratik
    Participant

    You will need to upload the image icon to your server and then add that image to the specific link via CSS.

    #99413
    makintour
    Participant

    yeah understood

    #99414
    makintour
    Participant

    codes by your link for icons not correct…
    found this

    #99418
    Pratik
    Participant

    I am sorry, but I cannot understand what you are saying. This theme does not use Fontawesome.

    #99425
    makintour
    Participant

    You are wrong.
    /wp-content/themes/fabulous-fluid-pro/style.css?ver=4.6.1

    .search-submit, .social-networks li a, #responsive-menu-button, .meta-info span:before, .readmore:after, #scrollup {
        font-family: FontAwesome;
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    #102921
    dercncplaner
    Participant

    but how to add skype?

    For facebook and other networks I add the links and it detect and show the icon. How to do it for skype?

    #102923
    Pratik
    Participant

    Hi @dercncplaner,

    Skype has a different protocol, so for security reasons, WordPress has it disabled by default.

    If you really want it, then it can be done via child theme customization.

    For that, first make a child theme for your theme. Details on creating a child theme is here: http://catchthemes.com/blog/create-child-theme-wordpress/

    Then add following code in your child theme’s functions.php file:

    
    /**
     * Skype URI support for social media icons
     */
    function fabulous_fluid_child_allow_skype_protocol( $protocols ){
        $protocols[] = 'skype';
        $protocols[] = 'callto';
        return $protocols;
    }
    add_filter( 'kses_allowed_protocols' , 'fabulous_fluid_child_allow_skype_protocol' );
    

    Then, in your child theme’s style.css file, add following code:

    
    .social-networks li a[href*="skype"]:before,
    .social-networks li a[href*="callto"]:before {
        content: "\f17e";
    }
    .site-header .social-networks li a[href*="skype"],
    .site-header .social-networks li a[href*="callto"] {
        background-color: #12a5f4;
    }
    

    This should do the work. Let me know if you have further issues.

    Regards,
    Pratik

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Social Icons’ is closed to new replies.