CSSTファイルのfontawesomeキャレットでキャレットPNGを置き換えます。

Question

私のメニューの背景イメージをFontAwesome文字を使用する文字列に置き換えたいとします。これは、既製のメニュー、Joomlaのモジュールです。それはこのようになります

：ここ

はCSSです：

.responsiveMenuTheme5m.isMobile > li.deeper > span { 
    background-image: url("../images/downArrow.png") !important; 
    background-position: right 57px !important; 
    background-repeat: no-repeat !important; 
} 

だから、メニューコーダはdownArrow.pngと呼ばれる画像を提供します。基本的にキャレット・ダウンです。私はこれをFontAwesome <span class="fa fa-caret-down"> </span>に置き換えたいと思います。私はTwitterのブートストラップ3のテンプレートを持っているし、FontAwesomeがインストールされているので、これは可能性があると思った。

誰でも手伝ってもらえますか？

Answer 1

あなたはspan要素のCSSを変更することで、このことができるはずです。この

.responsiveMenuTheme5m.isMobile > li.deeper > span{ 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.responsiveMenuTheme5m.isMobile > li.deeper > span:before { 
    content: "\f0d7"; 
} 

Answer 2

を試してみてください。すべてがOKで、素晴らしいフォントが追加することによって、正しくインポートされている場合：

.responsiveMenuTheme5m.isMobile > li.deeper > span:before { content: "\f0d7"; }

あなたのフォントが表示されます。あなたは、このコードにhttp://fontawesome.io/icon/caret-down/

Answer 3

をチェックアウトすることができます

また、このいずれかを試してください：あなたが使用する必要があります

<i class="fa fa-caret-down"></i> 

：

.responsiveMenuTheme5m.isMobile > li.deeper > span { 
    background-position: right 57px !important; 
    background-repeat: no-repeat !important; 
} 

は、次のコードでキャレットを置き換え<スパン>（オプション）：

<span class="fa fa-caret-down"></span> 

バックグラウンド位置にある値を変更することで、左キャレット距離で再生する必要があります。