フォントにツールチップを追加するawesome icon

Question

ここに誰かがフォントのすばらしいアイコンのツールチップを追加しましたか？

私はfollowing jsfiddleですが、アイコンにツールチップを追加するガイドを見つけることができないようです。

`

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

</header>` 

Answer 1

任意のHTML出力（FontAwesomeだけではなく）にツールチップを追加することの問題は、自分自身で全体の本です。 （私を含め）ほとんどの人が標準ツールチップを好きではないため、

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

または

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

しかし：;-)

デフォルトの方法は、タイトル属性を使用することですそれらを「美化」し、すべての種類の機能拡張を提供するツールがあります。私の個人的なお気に入りはjBoxとqtip2です。

Answer 2

はこれを試してみてください：素晴らしい

フォントはちょうど少数の単語で利用可能な634個のアイコンで、利用するには極めてシンプルで強力なライブラリです。

どのように動作しますか？フォントAwesomeは../fontsディレクトリに格納されているUnicode文字を使用して、アイコンをテキストとして表示するので、i.fa要素をそれぞれのUnicode文字に変更します。

アイコンを作成するにはどうすればよいですか？主にベストプラクティスのために、すべてのアイコンクラスをi要素またはイタリック要素にする必要がありますが、Font Awesomeでパフォーマンスを向上させることもできます。すべてのアイコンにはクラスfaもあります。これはアイコンを示し、アイコンなしでは動作しません。その後、別のファーがプレフィックスされたアイコンを追加してください。完成した例は以下の通りです：

Unicode文字オフフォント素晴らしい作品なのでFA-鉛筆

なり、それはまた、フォントサイズ、色、およびそれ以上のものとして、任意のテキスト操作は同様にそれを適用することができます。

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

Answer 3

https://codepen.io/jonmilner/pen/bfkKFは、おそらく役に立つ例です。

<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

は、単にこれは、そのアイコンホバー「編集モード」が表示されます

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

のようなタグでタイトルを使用します。