この質問がこのフォーラムのどこかですでに聞かれていないことを願っています。私はそれを検索したことを誓います!
私の目標は、マウスが上にあるときに「タグ」アイコンを変更することです。つまり、古いタグの代わりに「タグ」アイコンが表示されるようにします。
簡単な解決策があると確信しています。おそらく使用
.fa-tag:hover {
background: url(something);
}
ここに、.fa-tagアイコンのある私のウェブサイトのページ: http://wordsinthebucket.com/about
ご清聴ありがとうございました。
2つのアイコンがありますが、一度に1つしか表示されず、:hover
状態。これはbackground
をいじるよりも柔軟だと思います。
.change-icon > .fa + .fa,
.change-icon:hover > .fa {
display: none;
}
.change-icon:hover > .fa + .fa {
display: inherit;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
<span class="change-icon">
Tags
<i class="fa fa-tags"></i>
<i class="fa fa-gear"></i>
</span>
次のようなCSSを追加することでできます。
.fa-tag:hover:before {
content: "\f02c"
}
:before
にカーソルを合わせると、.fa-tag
疑似要素のコンテンツが変更されます。
.fa-tag
スタイリングを上書きするのは良い考えではないと確信しています。少なくとも、親クラスによってスコープを設定します。 .entry-content .fa-tag:hover:before
(ただし、author-tags
のようなより良いクラス名を好むでしょう。
.fa-camera-retro:hover:before{
content: "\f02d";
}
デモ- http://www.bootply.com/oj2Io7btD7
ホバーで:before
擬似要素のcontent
を変更する必要があります
完全なfontawesomeコンテンツコードのリストはこちらです
Faタグを別のスコープの別の場所で必要とする可能性があるため、faタグを上書きすることはお勧めできません。私はこのように行きます: http://antonakoglou.com/change-font-awesome-icon-content-hover/
これは実際に私が発見したこの回答の2番目の部分です。 https://stackoverflow.com/a/19503006