2019/11/22

在 React 使用 Font Awesome

在【[Day 09 - 網速換算器] 網速傻傻分不清楚 Mbps? Mb/s? 來寫個單位換算器吧
這篇看到 REACT 搭配 Font Awesome 的畫面後,想試試看是否能在REACT專案中也套入它的效果。


因為REACT網站不能夠像範例那樣直接使用HTML引入的手法,所以就用正規的import方式來使用。


第一步:使用 Font Awesome 元件

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

這一步是要能在 REACT 使用 Font Awesome 標籤,例如:

<FontAwesomeIcon icon={fas.faAngleRight} size="2x" />


第二步:把 Font Awesome 圖示全部載入

因為 Font Awesome 圖示非常多,一個一個載入要打非常多的字,所以先一口氣載入進來,省得去找出自己要的時間。

這只是冰山一角

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'

<FontAwesomeIcon icon={fas.faAngleRight} size="2x" />


第二步完成後就能在 FontAwesomeIcon 裡使用 icon 屬性。


畫圈圈的作法

紅框處有個圓圈,中間還有雙向符號,看似 1 個圖型,實由 2 個圖型重疊來達成此效果。

這裡使用到【Layouts】技術,如下圖:
<span className="exchange-icon fa-layers fa-fw fa-stack">
  <FontAwesomeIcon icon={far.faCircle} size="2x" />
  <FontAwesomeIcon icon={fas.faExchangeAlt} size="1x" />
</span>

利用 1 個 Layouts 把圖型合併,也是這個範例很神奇的特色。

結論

REACT資源雖然超級多,實際用起來才發現可以使用的資料非常零碎,每找出一個解法才發現解得不完全,要不就是錯誤,要諸多嚐試才能得到理想的成果。

以上提供給各位做個參考。 😄 😄 😄

See alse :

沒有留言:

張貼留言

ebook【Delphi跨平台資料庫程式設計火速上手】電子書出版 (CHT)

Delphi 跨平台資料庫程式設計火速上手,是本關於整合 Delphi 的跨平台技術打造 2-Tier 架構的跨平台 APP 的入門技術書。 全書沒有需要理解的技術知識,只講套路。 力求短時間把製作 APP 的工法熟悉,未來要開發其它的應用程式也能舉一反三。 底下...