Tagged: , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • August 19, 2016 at 7:29 am #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!

    August 19, 2016 at 9:22 am #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

    September 15, 2016 at 1:25 pm #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.

    September 15, 2016 at 1:38 pm #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

    September 15, 2016 at 1:45 pm #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 )

    September 15, 2016 at 2:20 pm #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

    September 15, 2016 at 2:43 pm #99410
    makintour
    Participant

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

    September 15, 2016 at 2:48 pm #99411
    makintour
    Participant

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

    September 15, 2016 at 2:51 pm #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.

    September 15, 2016 at 2:54 pm #99413
    makintour
    Participant

    yeah understood

    September 15, 2016 at 3:02 pm #99414
    makintour
    Participant

    codes by your link for icons not correct…
    found this

    September 15, 2016 at 3:29 pm #99418
    Pratik
    Participant

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

    September 15, 2016 at 6:11 pm #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;
    November 6, 2016 at 9:06 pm #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?

    November 7, 2016 at 9:46 am #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

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