這個部分主要是 social media 的區塊，會用到 fontawesome 上的 icon 們，需要 facebook、IG、Youtube 跟分享符號等等，先來 fontawesome 上找到這些 icon 們

Font Awesome - facebook

Font Awesome - instagram

Font Awesome - youtube

Font Awesome - share

這邊要注意一個小坑，我們之前 import icon 的時候，都是使用 @fortawesome/free-solid-svg-icons 但是 brand 系列是另一套，所以要再使用 yarn 來 add brand 這套 icon，才會有 social media 系列

yarn add @fortawesome/free-brands-svg-icons

再來 import 就可以了，這邊也補上了 follow us 的文字內容並設定 class，要注意的是 follow us 的部分是接在第三欄下方的，所以 top border 也要設定成粗體的白線樣式！

// Header.js

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

import {
  faBars,
  faAngleDown,
  faTimes,
  faShareAlt,
} from "@fortawesome/free-solid-svg-icons";

import {
  faFacebookF,
  faInstagram,
  faYoutube,
} from "@fortawesome/free-brands-svg-icons";

export default function Header() {
  //...
  return (
    <nav className="header">
      <div className={modalOpen === true ? "modal show" : "modal"}>
        <div className="modal-dialog">
          <div className="modal-content">
            //...
            <div className="modal-body">
							//...
              <div className="modal-column">
                {info.map(function (item) {
                  return (
                    <div>
                      <a href="/">{item}</a> <hr />
                    </div>
                  );
                })}
                <div className="follow-us">follow us</div>
                <FontAwesomeIcon
                  icon={faFacebookF}
                  className="social-media"
                  size="2x"
                />
                <FontAwesomeIcon
                  icon={faInstagram}
                  className="social-media"
                  size="2x"
                />
                <FontAwesomeIcon
                  icon={faYoutube}
                  className="social-media"
                  size="2x"
                />
                <FontAwesomeIcon
                  icon={faShareAlt}
                  className="social-media"
                  size="2x"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
}

sass 的部分

// _modal.sass

.modal-column
    vertical-align: top
    border-top: 1.5px solid $primary-background-color
    width: 29vw
    display: inline-block
    margin: 16px
    
		//...

    .follow-us
        color: $dark-gray
        text-transform: uppercase
        border-top: 1px solid $primary-background-color
        padding-top: 8px
        margin-top: 32px

    .social-media
        width: 20px
        height: 20px
        display: inline-block
        border-radius: 60px
        border: 1px solid $darker-gray
        padding: 13px
        margin: 13px 13px 13px 0

        &:hover
            color: $secondary-color
            border: 1px solid $secondary-color
            cursor: pointer
            transition: 0.3s

1. follow us 要再補上字型大寫的設定
2. social media 的部分，要先設定固定寬高，在設定 radius 才會有正圓形
3. hover 有加上小小的 transition 讓顏色的變換自然一些

大概就是 John，恭喜 social media 的部分也告一段落啦～大家明天見～～～

除此之外，也歡迎大家走走逛逛關於我們團隊夥伴的文章

lu23770127 - SASS 基礎初學三十天

10u1 - 糟了！是世界奇觀！

juck30808 - Python - 數位行銷分析與 Youtube API 教學

HLD - 淺談物件導向與Design Pattern介紹

SiQing47 - 前端？後端？你早晚都要全端的，何不從現在開始？