DAY 21 制作 Nav Bar - FontAwesome

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 - 前端？後端？你早晚都要全端的，何不从现在开始？