Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1357295

    Hi all..

    I need to put the Social Media Icons in a footer widget and not in the socket.. I need to use four icons: Facebook, Linkedin, Instagram and Mail..

    The site have not a child theme.,

    I’ve tried several codes from past post but without results..

    Can anyone help me..?

    Thank You very much

    #1357324

    Hey newmediologo,

    Please try using markup like this:

    <ul><li class='social_bookmarks_facebook av-social-link-facebook social_icon_1'><a target="_blank" aria-label="Link to Facebook" href='https://facebook.com/#' aria-hidden='false' data-av_icon='' data-av_iconfont='entypo-fontello' title='Facebook' rel="noopener"><span class='avia_hidden_link_text'>Facebook</span></a></li><li class='social_bookmarks_linkedin av-social-link-linkedin social_icon_2'><a target="_blank" aria-label="Link to LinkedIn" href='https://linkedin.com/#' aria-hidden='false' data-av_icon='' data-av_iconfont='entypo-fontello' title='LinkedIn' rel="noopener"><span class='avia_hidden_link_text'>LinkedIn</span></a></li><li class='social_bookmarks_instagram av-social-link-instagram social_icon_3'><a target="_blank" aria-label="Link to Instagram" href='https://instagram.com/#' aria-hidden='false' data-av_icon='' data-av_iconfont='entypo-fontello' title='Instagram' rel="noopener"><span class='avia_hidden_link_text'>Instagram</span></a></li><li class='social_bookmarks_mail av-social-link-mail social_icon_4'><a  aria-label="Link to Mail" href='#' aria-hidden='false' data-av_icon='' data-av_iconfont='entypo-fontello' title='Mail'><span class='avia_hidden_link_text'>Mail</span></a></li></ul>

    Best regards,
    Rikard

    #1357328

    Thanks @Rikard, icons were displayed but have vertical alignment, I need they stay horizontally..

    Thanks..

    #1357332

    Hi,

    Please try this in Quick CSS:

    .widget li {
        display: inline-block;
    }

    Best regards,
    Rikard

    #1357357

    Thanks @rikard.. I’ve added a padding or the icons were displayed all togheter,,

    .widget li {
        display: inline-block; padding; 10px;
    }

    Just a little help more.. I need to have the icons a little bit bigger.. Thanks..

    • This reply was modified 2 years, 5 months ago by newmediologo. Reason: Insert site link
    #1357369

    Hi,

    Please try this CSS as well:

    .widget li a:before {
        font-size: 20px; 
    }

    Best regards,
    Rikard

    #1357372

    Ok @rikard it works but may be better if the icons have the same behavior with mouse-over as the default icons that are are on the the of the page..

    Apologize me for boring You..

    Thank You very much..

    #1357374

    Hi,

    Please try this CSS as well:

    .widget li a {
        float: left;
        width: 30px;
        line-height: 30px;
        display: block;
        margin: 0px;
        outline: none;
        padding: 0;
        min-height: 30px;
        height: 100%;
        overflow: visible;
        z-index: 2;
        position: relative;
        text-align: center;
    }

    Best regards,
    Rikard

    #1357376

    Hi @rikard.. Perfect.. Thank You very much..:) But the widget with the last posts is disappeared..

    • This reply was modified 2 years, 5 months ago by newmediologo.
    #1357383

    Hi,

    Try to replace .widget with #custom_html-2.

    Best regards,
    Rikard

    #1357385

    Right @rikard.. Works..!

    sintax is #custom_html-2 or #custom_html-2.

    Thank You very Much..

    #1357386

    Hi,

    Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1357387

    Thanks @rikard.. You ca close..

    Thank You very much again..:)

    #1357389

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Social Media Icons in a footer Widget’ is closed to new replies.