アイコンを使用して別のものに手紙を置き換えます

私はホバーで別のものと砂時計を変更したいと思います[最初の砂時計はBasicImgです。ホバーでこれに置き換えたい：AfterHover] ... 私はそれをやろうとしていますJSとが、ここでの問題は、これはちょうどletter..Iが砂時計はただの文字であることを意味しているである - 私は、アイコンフォント... を使用砂時計のコードはこれです：アイコンを使用して別のものに手紙を置き換えます

.fa.fa-hourglass-start{ 
 
color:inherit; 
 
\t font-size: 28px; 
 
\t line-height: 20px; 
 
\t vertical-align: middle; 
 
}

<html> 
 
<head> 
 
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css"/> 
 
</head> 
 
<body> 
 
<li><a href="#"><span class="fa fa-hourglass-start"></span> Istoric</a> 
 
</body> 
 
</html>

私の悪い英語に申し訳ありません

（例で編集）

出典

2016-05-15 Geov

あなただけCSSでそれを達成したい場合は、あなたが作成する必要があります通常の状態のデフォルトアイコン、ホバー状態の代替アイコンを持つカスタムクラス。 JavaScriptを使って上手くいくなら、文字を変更せずにクラスを変更してクラスを削除し、新しいクラス（fa-iconname）を追加することができます – moped

a > .my-hourglass:before{content:"\f251"} 
 
a:hover > .my-hourglass:before{content:"\f252"}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 
<html> 
 
<head> 
 
    <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.min.css"/> 
 
</head> 
 
<body> 
 
<li><a href="#"><span class="fa my-hourglass"></span> Istoric</a> 
 
</body> 
 
</html>

（代わりにFA-砂時計開始の）あなたのアイコンのCSS上記使用

出典

2016-05-15 13:40:54 moped

Thxたくさんの人。働いていますが、作る。そのクラスからのリンクを選択するか、他に何かを作成しますか？再びThx。 – Geov

@Geov '>は要素の子を意味します。例えば 'a> .class'は' a'要素の子である '.class'要素を選択することを意味します。 – Mohammad

正確には、アンカーで直接クラスにのみ適用されるため、同じアイコンを持つ他の要素がある場合は、そこには適用されません。 @Geov私のソリューションはあなたのために働いた場合は、それを受け入れてください;） – moped

アイコンを使用して別のものに手紙を置き換えます

答えて

関連する問題