[akosan]

【お使いの Snow Monkey のバージョン】
【お使いの Snow Monkey Blocks のバージョン】バージョン 18.2.0
【お使いの Snow Monkey Editor のバージョン】バージョン 9.1.2
【お使いのブラウザ】chrome
【当該サイトのURL】https://miriohta.com/
いつもお世話になっております。よろしくお願いいたします。

### 実現したいこと
フッター固定ナビゲーション（モバイル用）にfontawesomeではなくpng画像を入れたい
そもそも、こんな事ができるのかわからずにいます。
png画像を入れる理由→モバイルのページ表示スピードを上げるため
画像を入れるのが難しいのであれば「軽量なfontawesome」で乗り切ります。

### 発生している問題
できない

### 試したこと
imgタグを入れてみる→当然できず
cssで画像を入れる方法を考えるが撃沈（backgroundを使い背景で入れる？）
過去フォーラムの検索

毎回この話題ばかり質問しているような気もしていますが
かなり表示スピードに差がでてしまうので解決したいと思っています。

♥ 0

いいねをした人: 居ません

[Olein_jp]

実際に試せてはいませんが、CSS の擬似要素で対応できるのではないかと思います。

.p-footer-sticky-nav > ul > li.menu-item-*** > a:before {
   CSS書く
}

必要であれば a に position:relative など設定し、また管理画面からメニュー項目にCSSクラスを追加するなどすることで、より一層明瞭な CSS を書くことができるかと思います。

お試しください。

♥ 1

いいねをした人:

[akosan]

ご教示くださってありがとうございます。

フッター固定ナビゲーション（モバイル）に設定

<i class="mob_love"></i>
<p>ここに文字</p>

CSS

.p-footer-sticky-nav > ul > li.menu-item-4793 > a:before {
content: url(URL);
}

画像は30pxがちょうど良かったです。CSSのクラスを設定していますが、今回は必要ありませんでした。
ありがとうございました。

そしていざPageSpeed Insightsで測定してみると画像の方が表示スピードが若干下がってしまったというオチつきでした。
30pxと小さい画像なのですが。
なのでどちらでもそれほど変わらないのかなという結果になりました。
※他の方のために記載しておきます

解決したのでトピックを閉じさせていただきます。

♥ 2

いいねをした人:

[投稿者]

投稿