WordPress.org

Forums

[resolved] Add space between my social icons (3 posts)

  1. MABZ
    Member
    Posted 1 year ago #

    Sorry, I am new to WordPress and would really appreciate your help.
    I am setting up a site with the twenty twelve theme. I am using a child theme, and have managed to put the header image above my menu bar so far, searching previous topics in the forum. I have also managed to insert several social icons in the header, so now my header has an image on the left, and some social icons on the right.

    Unfortunately, I cannot add a bit of space between my social icons. I have tried several ideas taken from previously solved issues, but none seem to work (I am afraid I am really clumsy!).

    This is the relevant code in my header php:

    <div class="socialicons">
    <a href="MY_FACEBOOK_URL"title="Facebook">
    <img src="MY_PNG" width="24" height="24" alt="Facebook"></a>
    <a href="MY_TWITTER_URL"title="Twitter">
    <img src="MY_PNG" 
    
    width="24" height="24" alt="Twitter"></a>
    <a href="MY_G+_URL">
    <img src="MY_PNG" width="24" height="24" alt="Google+"></a>
    <a href="MY_FLICKR_URL"title="Flickr">
    <img src="MY_PNG" 
    
    width="24" height="24" alt="Flickr!"></a>
    <a href="MY_LINKEDIN_URL"title="Linkedin">
    <img src="MY_PNG" 
    
    width="24" height="24" alt="LinkedIn"></a>
    </div>

    This is all the code in my css:

    @import url("../twentytwelve/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */
    
    .entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
        border-radius: none !important;
        box-shadow: none !important;
    }
    
    html, body .site {
        margin-top: 0px
    }
    
    .site-header {
        margin-top: 0px;
        padding: 0;
    }
    .main-navigation li ul li a {
    background: #ebdec3;
    border-bottom: 1px solid #ebdec3;
    display: block;
    font-size: 11px;
    font-size: 0.785714286rem;
    line-height: 2.181818182;
    padding: 8px 10px;
    padding: 0.571428571rem 0.714285714rem;
    width: 180px;
    width: 12.85714286rem;
    white-space: normal;
    }
    
    .main-navigation li ul li a:hover {
    background: #ebdec3;
    color: #86682c;
    }
    	.main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    border-bottom: 1px solid #d0b170;
    border-top: 1px solid #d0b170;
    display: inline-block !important;
    text-align: left;
    width: 100%;
    }
    
    .socialicons {
       float: right;
    padding-right: 15px;
    margin-top: 20px;
        position: relative;
       width: 200px;
    }
    
    .socialicons img {
       float: left;
    }

    I'd be really greatful if someone could help me with this. I am sure it is quite simple, but due to my ignorance I am really struggling with it.

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    WordPress just uses good ole' CSS. Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  3. MABZ
    Member
    Posted 1 year ago #

    Thanks so much for answering right away

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags