2017-06-10 1 views
0

Ich habe eine Wordpress-Seite https://dmarketer.com/ ich soziale Symbole in einer einer Zeile angezeigt werden soll, aber sie werden vertikal angezeigt, auch nach der Verwendung:Social Media Icons kommen nicht in einer Zeile auch nach der Anzeige mit: inline-block

display:inline-block; 

.social { 
 
     margin-bottom: 20px; 
 
    } 
 

 
    .social h4 { 
 
     margin-top: 25px; 
 
     font-size: 15px; 
 
    } 
 

 
    .social a i { 
 
     padding: 0px !important; 
 
     background: transparent !important; 
 
     font-size: 46px !important; 
 
     margin-left: 5px; 
 
     margin-right: 5px; 
 
    } 
 

 
    .fa-facebook-square { 
 
     color: #4267b2; 
 
    } 
 

 
    .fa-facebook-square:hover { 
 
     color: #365899; 
 
    } 
 

 
    .fa-twitter-square { 
 
     color: #1da1f2; 
 
    } 
 

 
    .fa-twitter-square:hover { 
 
     color: #1da1da; 
 
    } 
 

 
    .fa-linkedin-square { 
 
     color: #0084bf; 
 
    } 
 

 
    .fa-linkedin-square:hover { 
 
     color: #0073b1; 
 
    } 
 

 
    .fa-instagram { 
 
     color: #d9317a; 
 
    } 
 

 
    .fa-instagram:hover { 
 
     color: #bc318f; 
 
    }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="social"> 
 
     <h4>Connect with me on below social channels:</h4> 
 
     <a href="https://www.facebook.com/RealMahadev/" target="_blank" itemprop="SameAs"> 
 
    <i class="fa fa-facebook-square fb"></i> 
 
    </a> 
 
     <a href="https://twitter.com/realmahadev" target="_blank" itemprop="SameAs"> 
 
    <i class="fa fa-twitter-square"></i> 
 
    </a> 
 
     <a href="https://www.linkedin.com/in/realmahadev" target="_blank" itemprop="SameAs"> 
 
    <i class="fa fa-linkedin-square"></i> 
 
    </a> 
 
     <a href="https://www.instagram.com/realmahadev/" target="_blank" itemprop="SameAs"> 
 
    <i class="fa fa-instagram instagram"></i> 
 
    </a> 
 
    </div>

I Font-Awsome Symbole verwenden.

Antwort

0

Sie müssen die <br> Tags zwischen den Links entfernen, die die Symbole enthalten.

+0

Sie haben Recht! Ich habe HTML-Code verkleinert und '
' -Tags entfernt. Könnten Sie mir mit einem weiteren Problem helfen? Auf meiner Website habe ich Recommended Tools Widget, habe ich seine Position mit WordPress-Plugin behoben. Wenn ich meine Website nach unten scrolle, überschneidet sie sich mit der Fußzeile. Wie soll ich das verhindern? –

+0

Dieser 'fixed' Parameter und seine Positionseinstellungen werden automatisch von einem Javascript hinzugefügt, das auch einen' bottom' Parameter hinzufügt, wenn das Blättern am Ende der Seite erreicht wird. Sie müssten diesen "unteren" Wert im Skript des Plugins anpassen (fügen Sie die Höhe der Fußzeile zu ihrem Wert hinzu, um einen Offset zu erstellen) – Johannes

+0

Upvoted! Danke –

0

Verwenden Sie display:flex; für den übergeordneten Tag p. Dies wird das Problem lösen.

0

Der Code, den Sie in Ihrem Snippet haben, scheint in Ordnung zu sein. Ich würde empfehlen, text-decoration: none; auf dem <a> 's zu verwenden.

.social { 
 
    margin-bottom: 20px; 
 
} 
 

 
.social h4 { 
 
    margin-top: 25px; 
 
    font-size: 15px; 
 
} 
 

 
.social a { 
 
    text-decoration: none; 
 
} 
 

 
.social a i { 
 
    padding: 0px !important; 
 
    background: transparent !important; 
 
    font-size: 46px !important; 
 
    margin-left: 5px; 
 
    margin-right: 5px; 
 
} 
 

 
.fa-facebook-square { 
 
    color: #4267b2; 
 
} 
 

 
.fa-facebook-square:hover { 
 
    color: #365899; 
 
} 
 

 
.fa-twitter-square { 
 
    color: #1da1f2; 
 
} 
 

 
.fa-twitter-square:hover { 
 
    color: #1da1da; 
 
} 
 

 
.fa-linkedin-square { 
 
    color: #0084bf; 
 
} 
 

 
.fa-linkedin-square:hover { 
 
    color: #0073b1; 
 
} 
 

 
.fa-instagram { 
 
    color: #d9317a; 
 
} 
 

 
.fa-instagram:hover { 
 
    color: #bc318f; 
 
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="social"> 
 
    <h4>Connect with me on below social channels:</h4> 
 
    <a href="https://www.facebook.com/RealMahadev/" target="_blank" itemprop="SameAs"> 
 
    <i class="fa fa-facebook-square fb"></i> 
 
    </a> 
 
    <a href="https://twitter.com/realmahadev" target="_blank" itemprop="SameAs"> 
 
    <i class="fa fa-twitter-square"></i> 
 
    </a> 
 
    <a href="https://www.linkedin.com/in/realmahadev" target="_blank" itemprop="SameAs"> 
 
    <i class="fa fa-linkedin-square"></i> 
 
    </a> 
 
    <a href="https://www.instagram.com/realmahadev/" target="_blank" itemprop="SameAs"> 
 
    <i class="fa fa-instagram instagram"></i> 
 
    </a> 
 
</div>

Verwandte Themen