Allineamento testo-icone navbar

[merovese]

Ciao a tutti ho provato a cercare ma non mi sembra di aver trovato nulla che faccia al caso mio, comunque il problema è sulla nav bar che utilizzo come menù vorrei inserire le maledette social icon, ma non riesco proprio ad allinearle al testo per farle rimanere sullo stesso piano. ecco il codice html:

<div class="container">        
           <div class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">  
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              </button>
              <a class="navbar-brand">#carnevaledipenitro</a>
          </div>
          <div class="collapse navbar-collapse">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#home">#home</a></li>
                <li><a href="#intro">#lanostrastoria</a></li>
                <li><a href="#people">#eventi</a></li>
                <li><a href="#work">#lotteria</a></li>
                <li><a href="#street">#contatti</a></li>
              </ul>
            <a href="https://www.facebook.com/carnevalepenitro/?ref=hl" target="new"><img src="img/icons/Apps-Facebook-icon.png" width="21" height="21" class="icona"></a>
                <img src="img/icons/Apps-Twitter-icon.png" width="21" height="21">
                <img src="img/icons/Apps-Instagram-icon.png" width="21" height="21">
                <img src="img/icons/Apps-Youtube-icon.png" width="21" height="21">
                <img src="img/icons/Apps-Tripadvisor-icon.png" width="21" height="21">
          </div><!--/.nav-collapse -->
        
        </div>

ed ecco il css

.navbar-fixed-top{width:970px; margin: 30px auto}
.navbar {text-transform: none;background-color: #000;opacity: 0.8;background-image: none;border:none;}
.navbar-inverse .navbar-brand, .navbar-inverse .navbar-nav > li > a {color:#B8860B;font-weight: 300}
.icona {
      float: left;
}

come potete notare ho provato anche a creare una classe "icona" ma nulla.
Mi dareste gentilmente un aiuto?
grazie infinite

[ResianTaxidrive]

scusa, a quale testo devono allinearsi le icone?

[merovese]

Scusa tu! Allora le icone devo piazzarle a destra dei bottoni formati dai testi: home, lanostrastotia,eventi,contatti

[ResianTaxidrive]

ok, allora, tutto il blocco dell'ul deve avere il float:left e inoltre dovresti chiudere tutti social in un altro div che farai flottare anch'esso a left.

[merovese]

ma devo modificare la ul class per dare il float al blocco ul?
scusate ma non sono proprio un campione di css

[ResianTaxidrive]

Puoi aggiungere float:left alla classe navbar-nav che è una delle due classi che sono applicate a quell'ul.

[merovese]

@media (min-width: 768px) {
  .navbar-nav {
    float: left;
    margin: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

Il problema è che nel css il navbar-nav è già float:left

[ResianTaxidrive]

Nel codice che hai postato in origine no. Nell'ultimo codice che hai messo la regola vale da una larghezza di 768px in su.

[merovese]

che casino, potresti gentilmente farmi un esempio di codice per posizionare le icone poi io vedo di customizzarlo?

[ResianTaxidrive]

chiudi le icone così

 <div id="social"> <a href="https://www.facebook.com/carnevalepenitro/?ref=hl" target="new"><img src="img/icons/Apps-Facebook-icon.png" width="21" height="21" class="icona"></a>
                <img src="img/icons/Apps-Twitter-icon.png" width="21" height="21">
                <img src="img/icons/Apps-Instagram-icon.png" width="21" height="21">
                <img src="img/icons/Apps-Youtube-icon.png" width="21" height="21">
                <img src="img/icons/Apps-Tripadvisor-icon.png" width="21" height="21"></div>
          </div>

e poi assegni a social

#social{ float:left}

e metti anche

ul.navbar-nav{float:left}

Ho messo l'ul davanti perchè non so se quella classe venga usata da qualche altra parte in giro e quindi non so se l'aggiunta del float va a incasinare qualcos'altro.