Schriftart Super soziale Symbole gestapelt in Bootstrap navbar

Ich baue eine Bootstappavigationsleiste, die 2 Social Media Icons auf der linken Seite hat, und eine Telefonnummer auf der rechten Seite. Meine sozialen Symbole enden vertikal gestapelt statt horizontal. Hier ist mein Code:Schriftart Super soziale Symbole gestapelt in Bootstrap navbar

<nav class="navbar navbar-static-top navbar-inverse"> 
     <a class="navbar-brand" href="#">Project name</a> 
     <ul class="nav navbar social"> 
      <li class="nav-item active"> 
      <a class="nav-link" href="https://www.facebook.com/account?ref=hl" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Facebook Social Clicks');"> 
       <span class="fa-stack fa-lg"> 
        <i class="fa fa-circle fa-stack-2x"></i> 
        <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> 
       </span> 
      </a> 
      </li> 

      <li class="nav-item active"> 
      <a class=""nav-link" href="https://twitter.com/account" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Twitter Social Clicks');"> 
       <span class="fa-stack fa-lg"> 
        <i class="fa fa-circle fa-stack-2x"></i> 
        <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> 
       </span> 
      </a> 
      </li> 
     </ul> 
    </nav>

Was mache ich falsch?

Quelle

2016-07-12 Roger Creasy

.fa-stack-1x, .fa-stack-2x { 
 
     line-height: inherit !important; 
 
     }

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Bootstrap 101 Template</title> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" > 
 

 
    </head> 
 
    <body> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Page 2</a></li> 
 
    </ul> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
     <li class="nav-item "> 
 
      <a class="nav-link" href="https://twitter.com/account" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Twitter Social Clicks');"> 
 
       <i class="fa fa-circle fa-stack-2x"></i> 
 
        <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> 
 
      </a> 
 
      </li> 
 
      <li class="nav-item "> 
 
      <a class="nav-link" href="https://www.facebook.com/account?ref=hl" target="_blank" onclick="ga('send', 'event', 'link', 'click', 'Facebook Social Clicks');"> 
 
        <i class="fa fa-circle fa-stack-2x"></i> 
 
        <i class="fa fa-facebook fa-stack-1x fa-inverse"></i> 
 
      </a> 
 
      </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
    
 

 

 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384- 
 
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
    </body> 
 

 
</html>

Quelle

2016-07-12 10:10:25 kuldeep

Schriftart Super soziale Symbole gestapelt in Bootstrap navbar

Antwort

Verwandte Themen