Yazıyüzüne araç ipucu ekle awesome icon

Question

Font-awesome simgelerine araç ipuçlarını ekleyen var mı?

following jsfiddle var, ancak simgelere araç ipuçları eklemek için bir kılavuz bulamıyor gibi görünmüyor.

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

</header>` 

Answer 1

herhangi bir HTML-Çıktı (sadece FontAwesome) araç ipuçları ekleyerek sorunu

`

kendi başına bütün bir kitap. ;-)

varsayılan yolu başlık özellik kullanmak olacaktır:

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

veya

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

Ama (ben dahil) çoğu insan bu yana

standart araç ipuçlarını sevmem, Dışarıda "güzelleştirecek" ve her türlü geliştirmeyi sunan MANY araçları var. Kişisel favorilerim jBox ve qtip2.

Answer 2

bu deneyin:

Yazı Müthiş birkaç kelimeyle mevcut 634 simgelerle, kullanımı son derece basit ama güçlü bir arşiv.

Nasıl çalışır? Font Awesome, i.fa öğelerini ilgili unicode karakterine dönüştürmek için bir ../fonts dizininde saklanan Unicode karakterlerini, metin olarak simgeyi görüntülerken kullanır.

Simgeyi nasıl oluştururum? Tüm simge sınıfları temel olarak en iyi uygulama için bir i öğesi veya italik bir öğe olmak zorundadır, aynı zamanda Yazı Başarısı ile performansı artırır. Tüm simgelerin üzerinde de sınıf fa var. Bu bir simgeyi belirtir ve onsuz çalışmayacaktır. Bundan sonra, istediğiniz simgeyi yeni bir satırla önceden ekleyin. Bitmiş bir örneği bulunmaktadır:

müthiş yazı unicode karakterleri kulanan Çünkü, o da herhangi bir metin manipülasyon böyle font-boyut, renk, ve daha fazlası gibi, hem de kendisine uygulamanızı sağlar fa-kalem

olur.

demo

: https://jsfiddle.net/u9Lcp3vz/

Answer 3

https://codepen.io/jonmilner/pen/bfkKF belki yararlı örneğidir.

<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

Basitçe Bu, o simgenin üzerine gelme 'Düzenleme Modu' gösterecektir

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

gibi etiketinde başlığını kullanın.