Aggiungi il suggerimento al font impressionante icon

Question

Qualcuno qui ha aggiunto suggerimenti alle icone font-awesome?

Ho il following jsfiddle, ma non riesco a trovare una guida per aggiungere suggerimenti alle icone.

`

<!-- display welcome text --> 
    <div id="welcomeText"> 
    <p>Welcome Harriet</p> 
    </div> 

</header>` 

Answer 1

La questione di aggiungere tooltip a qualsiasi HTML-Output (non solo FontAwesome) è un intero libro a sé stante. ;-)

Il modo di default sarebbe quello di utilizzare il titolo-attribute:

<div id="welcomeText" title="So nice to see you!"> 
    <p>Welcome Harriet</p> 
    </div> 

o

<i class="fa fa-cog" title="Do you like my fa-coq icon?"></i> 

Ma dal momento che la maggior parte delle persone (me compreso) non piace la norma-tooltip, ci sono MOLTI strumenti là fuori che li "abbelliscono" e offrono tutti i tipi di miglioramenti. I miei preferiti personali sono jBox e qtip2.

Answer 2

Prova questa:

carattere impressionante è una libreria estremamente semplice ma potente da usare, con 634 icone disponibili in poche parole.

Come funziona? Font Awesome utilizza caratteri Unicode memorizzati in una directory ../fonts per modificare qualsiasi elemento i.fa sul rispettivo carattere unicode, in quanto tale visualizza l'icona come testo.

Come si crea un'icona? Tutte le classi di icone devono essere un elemento i, o un elemento corsivo, principalmente per le migliori pratiche, ma migliora anche le prestazioni con Font Awesome. Tutte le icone hanno anche la classe fa su di loro. Questo denota un'icona e non funzionerà senza di essa. Dopodiché, aggiungi l'icona che desideri, preceduta da un altro fa-. Un esempio finito è di seguito:

diventa fa-matita

A causa del carattere impressionante funziona off caratteri Unicode, ma consente anche qualsiasi manipolazione del testo da applicare ad esso pure, come ad esempio font-size, colore e altro ancora.

demo: https://jsfiddle.net/u9Lcp3vz/

Answer 3

https://codepen.io/jonmilner/pen/bfkKF è forse un esempio utile.

<div class="social-icons"> 
    <a class="social-icon social-icon--codepen"> 
    <i class="fa fa-codepen"></i> 
    <div class="tooltip">Codepen</div> 
</div> 

body { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 100vh; 
} 

/* Color Variables */ 
$color-codepen: #000; 

/* Social Icon Mixin */ 
@mixin social-icon($color) { 
    background: $color; 
    background: linear-gradient(tint($color, 5%), shade($color, 5%)); 
    border-bottom: 1px solid shade($color, 20%); 
    color: tint($color, 50%); 

    &:hover { 
    color: tint($color, 80%); 
    text-shadow: 0px 1px 0px shade($color, 20%); 
    } 

    .tooltip { 
    background: $color; 
    background: linear-gradient(tint($color, 15%), $color); 
    color: tint($color, 80%); 

    &:after { 
     border-top-color: $color; 
    } 
    } 
} 

/* Social Icons */ 
.social-icons { 
    display: flex; 
} 

.social-icon { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    width: 80px; 
    height: 80px; 
    margin: 0 0.5rem; 
    border-radius: 50%; 
    cursor: pointer; 
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
    font-size: 2.5rem; 
    text-decoration: none; 
    text-shadow: 0 1px 0 rgba(0,0,0,0.2); 
    transition: all 0.15s ease; 

    &:hover { 
    color: #fff; 

    .tooltip { 
     visibility: visible; 
     opacity: 1; 
     transform: translate(-50%, -150%); 
    } 
    } 

    &:active { 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset; 
    } 

    &--codepen { @include social-icon($color-codepen); } 

    i { 
    position: relative; 
    top: 1px; 
    } 
} 

/* Tooltips */ 
.tooltip { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 50%; 
    padding: 0.8rem 1rem; 
    border-radius: 3px; 
    font-size: 0.8rem; 
    font-weight: bold; 
    opacity: 0; 
    pointer-events: none; 
    text-transform: uppercase; 
    transform: translate(-50%, -100%); 
    transition: all 0.3s ease; 
    z-index: 1; 

    &:after { 
    display: block; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    width: 0; 
    height: 0; 
    content: ""; 
    border: solid; 
    border-width: 10px 10px 0 10px; 
    border-color: transparent; 
    transform: translate(-50%, 100%); 
    } 
} 

Answer 4

Basta usare il titolo in etichetta come

<i class="fa fa-edit" title="Edit Mode"></i> 

Questo mostrerà 'Edit Mode' quando hover quell'icona.