Web白描

Webデザインの勉強 - 演習

Font Awesome

★レスポンシブ

Font Awesome

記号を「文字（Font）」で利用する
この例は「ハンバーガーメニュー」のアニメーションが不要な場合

fontawesome.com

Google icon

「Font Awesome 」以外の選択肢

fonts.google.com

ハンバーガーメニューを作成する場合（文字を置換する場合）

「Start for Free」ボタンをクリック

「Other Ways to Use」の「Explore Icons」ボタンをクリック

「bar」で検索

「bars」を選択

fontawesome.com

「index.html」にペースト

  <div id="btn">
    <i class="fa-solid fa-bars"></i>
  </div>

「xmark」で検索

「xmark」を選択

fontawesome.com

「index.html」にペースト

  <div id="btn">
    <i class="fa-solid fa-bars"></i>
    <i class="fa-solid fa-xmark"></i>
  </div>

ハンバーガーメニュー（ボタン部分のみ）

jQueryを利用
切り替える文字は「Font Awesome」を利用

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Toggle Menu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<link rel="stylesheet" href="css/font.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js" defer></script>
<script src="js/font_nav.js" defer></script>
</head>
<body>

<!-- header -->
<header class="header">
  <div id="btn">
    <i class="fa-solid fa-bars"></i>
    <i class="fa-solid fa-xmark"></i>
  </div>
</header>
<!-- /header -->

</body>
</html>

style.css

@charset "URF-8";

/* --------------------------------------
  reset
-------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
html {
  font-size: 100%;
}

/* --------------------------------------
  header
-------------------------------------- */
.header {
  margin: 50px;
}


/* --------------------------------------
  nav
-------------------------------------- */
#btn {
  display: block;
  width: 50px;
  height: 50px;
  margin: auto;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
#btn i {
  font-size: 50px;
}
.click {
  display: block;
}
.click i:first-child {
  display: none;
}

script.js

クリックされた「ボタン」に、クラス名「click」を追加・削除を繰り返す

$(function(){
  $('#btn').on('click', function() {
    $(this).toggleClass('click');
  });
});

作例