FontAwesome

FontAwesome 讓我們可以快速方便的使用 Icon 的設計，不過他有免費版以及付費版，目前我們使用免費版即可

這邊先簡單介紹如何引入 React 中並使用

Font Awesome

這邊照著官方的安裝步驟，使用 yarn 將套件加入我們的專案中

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/react-fontawesome

引入之後，我們可以先在官網上瀏覽免費的 icon，選定圖片之後，記下他的名稱，並且如下這樣使用

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

接下來我們要在 dropdown 中加入下拉的 icon，並且為他設定 class

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBars } from "@fortawesome/free-solid-svg-icons";
import { faAngleDown } from "@fortawesome/free-solid-svg-icons";

export default function Header() {
  //...
  return (
    <nav className="header">
      <div className="top">
        <label className="logo">VOGUE</label>
        <label className="menu">
          <div className="menu-item">
            <div className="dropdown">
              <label
                onClick={() => handleOnClick()} 
                className="dropdown-label"
              >
                <span>Taiwan</span>
                <FontAwesomeIcon icon={faAngleDown} size="lg" className="icon" />
              </label>
             ...
            </div>
          </div>
          <div className="menu-item">
            <a href="/">membership</a>
          </div>
          <div className="menu-item">
            <a href="/">
            </a>
          </div>
        </label>
      </div>
      <div className="sub-menu">
       //...
      </div>
    </nav>
  );
}

這樣就能成功引入我們的下拉 icon 了！

接著補上 class 在 _dropdown.sass 中

.dropdown
    position: relative
    display: inline-block
		//...
    .icon
        margin-left: 8px

這樣 fontawesome 就配置好了，那我們明天見！

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

lu23770127 - SASS 基礎初學三十天

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

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

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

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