web-dev-qa-db-ja.com

：hoverのFont Awesomeアイコンを変更

この質問がこのフォーラムのどこかですでに聞かれていないことを願っています。私はそれを検索したことを誓います！

私の目標は、マウスが上にあるときに「タグ」アイコンを変更することです。つまり、古いタグの代わりに「タグ」アイコンが表示されるようにします。

簡単な解決策があると確信しています。おそらく使用

.fa-tag:hover {
 background: url(something);
}

ここに、.fa-tagアイコンのある私のウェブサイトのページ： http://wordsinthebucket.com/about

ご清聴ありがとうございました。

csshovericonsfont-awesome
16
Marco

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>
29
dfsq

次のようなCSSを追加することでできます。

.fa-tag:hover:before {
  content: "\f02c"
}

:beforeにカーソルを合わせると、.fa-tag疑似要素のコンテンツが変更されます。

.fa-tagスタイリングを上書きするのは良い考えではないと確信しています。少なくとも、親クラスによってスコープを設定します。 .entry-content .fa-tag:hover:before（ただし、author-tagsのようなより良いクラス名を好むでしょう。

7
ckuijjer
.fa-camera-retro:hover:before{
    content: "\f02d";
}

デモ- http://www.bootply.com/oj2Io7btD7

ホバーで:before擬似要素のcontentを変更する必要があります

完全なfontawesomeコンテンツコードのリストはこちらです

http://astronautweb.co/snippet/font-awesome/

5
Vitorino fernandes

Faタグを別のスコープの別の場所で必要とする可能性があるため、faタグを上書きすることはお勧めできません。私はこのように行きます： http://antonakoglou.com/change-font-awesome-icon-content-hover/

これは実際に私が発見したこの回答の2番目の部分です。 https://stackoverflow.com/a/19503006

1
constanton