メニューとフッターに「line」アイコンの設置方法について

[merrow]

テーマ「Dawn」で制作しています。

メニュー（ドロワー）とフッターに「LINE」のアイコンを追加したいと考えています。

追加する方法をご教授頂ければと思います。

よろしくお願いいたします。

[Qcoltd]

ご質問いただいている、LINEアイコンを追加したい件ですが、設置されたい位置やアイコンのサイズがわかりかねますので、下記条件前提で表示する方法を説明させていただきます。

アイコン：正方形

ヘッダー：PCではサーチアイコンの左、スマホではメニュー内ログインボタン上

フッター：共通でSNSアイコンが表示される位置

設定手順

**１.**管理画面 > コンテンツ > ファイルから使用するアイコンをアップロード

**２.**管理画面 > オンラインストア > テーマ > カスタマイズボタンの横にある「…」 > コードを編集をクリック

**３.**コード編集画面の「ファイルを検索」エリアに、『header.liquid』と入力しソートされたファイルを開きます。

**４.**header.liquid内で下記コードを探し、
『

』
次の行に下記コードを追加

**５.**header.liquid内で下記コードを探し、
『

』
前の行に下記コードを追加

**６.**コード編集画面の「ファイルを検索」エリアに、『social-icons.liquid』と入力しソートされたファイルを開きます。

**７.**social-icons.liquid内で、下記コードを探し、
『

』
次の表に下記コードを追加

- 



**８.**管理画面 > オンラインストア > カスタマイズボタンをクリック

**９.**左側テーマ設定をクリック

**１０.**カスタムCSSを選択し、下記CSSを追加し保存

.line_icon {
  display: block;
  width: 4.4rem;
  height: 4.4rem;
}
@media screen and (min-width: 750px)
  .line_icon {
    width: 2.2rem;
    height: 2.2rem;
    margin: 1.1rem;
  }
}
@media screen and (max-width: 749px) {
  .line_icon {
    width: 2.2rem;
    height: 2.2rem;
    margin: 1.1rem;
  }
}
.menu-drawer__icon {
  padding: 2.2rem 3.2rem;
}



表示例

PCヘッダー



スマホヘッダー



PCフッター



スマホフッター



ご参考まで。
(キュー小坂)

[hwa-japan]

初めまして、dawn(13.0.1)のメインテーマを複製して作成してます。

上記内容の10.のカスタムCSSを実行致しますと、

「オンラインストアのエディタセッションを公開できません」

というエラーが出てくるようになりました。（最初は出てこなかった）下記の解決策以外に何か方法ありますでしょうか？

https://community.shopify.com/post/2048419

また、以下の内容を変更しております。

1.**５.**header.liquid内で下記コードを探し、『

』前の行に下記コードを追加

の場所が発見出来なかったため、未入力です。

2.フッターにデフォルトで入ってるインスタグラムアイコンをヘッダーにも追加したかったのでインスタグラムの内容を追加。

3.リンク内容の記述がなかったのでリンクタグ追加

4.**10.**の追加CSS内容でアイコンの大きさと位置の変更

コードは下記の通りです。

よろしくお願い致します。

CSS

.line_icon {

display: block;

width: 2.4rem;

height: 4.4rem;

}

@media screen and (min-width: 750px)

.line_icon {

width: 2.2rem;

height: 2.2rem;

margin: 1.1rem;

}

}

@media screen and (max-width: 749px) {

.line_icon {

width: 2.2rem;

height: 2.2rem;

margin: 1.1rem;

}

}

.menu-drawer__icon {

padding: 2.2rem 3.2rem;

}

<img class=“instagram_icon" src=“アイコンurl”>