Allinea carattere Icone impressionanti (fa-2x) con icone impilate (pila di facce)

Question

Sto cercando di allineare 4 icone in fila per la funzionalità di condivisione di un sito web. Quando usavo 4 icone normali, si allineavano perfettamente e avevano le stesse dimensioni. Ora sto cercando di avere uno di loro impilati in modo che abbia un bordo e sta creando qualche problema

Qui di seguito è il codice Ho giocato con:

<div class="share-results"> 
    <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#"></a> 
    <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href=""></a> 
    <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href=""></a> 
    <a class="fa fa-2x fa-stack" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#"> 
    <i class="fa fa-square-o fa-stack-2x"></i> 
    <i class="fa fa-link fa-stack-1x"></i> 
    </a> 
</div> 

Questo crea:

sembra che ci sia solo un problema di dimensionamento, così ho giocato un po 'con l'utilizzo di fa-lg:

E anche senza alcun aiuto dimensionamento sull'elemento impilati:

Qualcuno sa come allineare un'icona con fa-2x ad un icone impilati?

Answer 1

C'è un modo per eseguire questa operazione con il minimo utilizzo di nuovi stili CSS:

Dovremmo usare busta che ha lo stesso stile come Twitter e Facebook, voglio dire piazza in stile con fa-envelope-square di classe. E fare tutti gli elementi di ancoraggio impilati:

<div class="share-results"> 
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Email" data-placement="top" href="#"> 
     <i class="fa fa-envelope-square fa-stack-2x"></i> 
    </a> 
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Facebook" data-placement="top" href=""> 
     <i class="fa fa-facebook-square fa-stack-2x"></i> 
    </a> 
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share on Twitter" data-placement="top" href=""> 
     <i class="fa fa-twitter-square fa-stack-2x"></i> 
    </a> 
    <a class="fa-stack fa-1x" data-toggle="tooltip" title="Share by Link" data-placement="top" href="#"> 
     <i class="fa fa-square fa-stack-2x"></i> 
     <i class="fa fa-inverse fa-link fa-stack-1x"></i> 
    </a> 
</div> 

In aggiunta a questo si cambia il margine tra gli elementi sovrapposti per farli apparire come nel tuo esempio:

.fa-stack { margin: -2px; } 

Il risultato sarebbe simile a questa:

Demo fiddle

Answer 2

Non riuscivo a trovare una soluzione durevole usando solo le classi fa- *, ma ho scoperto un paio di modi per ottenere questo risultato, che sono leggermente hacky, ma non terribilmente hacky.

Il primo approccio sovrappone l'icona fa-link, come testo, su un'icona normale fa fa-2x fa-square-o.

<div class="share-results"> 
    <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a> 
    <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a> 
    <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a> 
    <a class="fa fa-2x fa-square-o stacked" data-toggle="tooltip" title="Share by Link" data-placement="top"></a> 
</div> 

<style> 
    .stacked { 
     position:relative; 
    } 
    .stacked:after { 
     position: absolute; 
     font-family: FontAwesome; 
     font-size: .6em; 
     top:6px; 
     left:4px; 
     content: "\f0c1"; /*link icon*/ 
    } 
</style> 

Il secondo approccio utilizza una combinazione di position: fixed e un costume font-size per aiutare il nuovo collegamento align un po 'meglio:

<div class="share-results"> 
    <a class="fa fa-2x fa-envelope-o" data-toggle="tooltip" title="Share by Email" data-placement="top"></a> 
    <a class="fa fa-2x fa-facebook-square" data-toggle="tooltip" title="Share on Facebook" data-placement="top"></a> 
    <a class="fa fa-2x fa-twitter-square" data-toggle="tooltip" title="Share on Twitter" data-placement="top"></a> 
    <a class="fa fa-2x fa-stack stacked2" data-toggle="tooltip" title="Share by Link" data-placement="top"> 
    <i class="fa fa-square-o fa-stack-2x"></i> 
    <i class="fa fa-link fa-stack-1x"></i> 
    </a> 
</div> 

<style> 
    .stacked2 { 
     position: fixed; 
     font-size: 1.1em !important; 
     top: -7px; 
     left: -4px; 
    } 
</style> 

Il secondo approccio è un po' più preciso, ma ho incluso il prima per completezza se ti piacerebbe giocarci. Ecco i risultati finali, rispettivamente:

Ed ecco un CodePen example.

Non sono sicuro se questo risponde alla tua domanda, ma spero che questo aiuti un po '.

Answer 3

Dal momento che le icone dei caratteri impressionanti sono tutte relative a larghezze, altezze e altezze di linea, ho cercato di creare una soluzione in cui tutti i valori fossero gli stessi (si spera) evitassero la confusione e facilitassero l'aggiornamento in avanti.

Utilizzando l'esempio che ha dato ho impostato queste proprietà CSS:

.fa { 
    /*this sets values for all icons*/ 
    color: gray; 
    font-size: 50px; 
    line-height: 55px; 
    text-decoration: none; 
} 
.fa-link { 
    /*make inner icon smaller but keep line-height the same so its centered vertically*/ 
    font-size: 30px; 
} 
.fa-stack-cust { 
    position: relative; 
    display: inline-block; 
    width: 50px; 
    height: 50px; 
    line-height: 55px; 
} 

ho avvolto le icone all'interno di una lista non ordinata e sono ora mostrando tutti sulla stessa linea. Here is the JS.Fiddle showing you a working example. Sarai in grado di vedere le modifiche HTML anche se sono minori. Spero possa aiutare.