將所有的圖示分成四大類
在 FontAwesome 將所有圖示分成 4 大類,分別是 SOLID, REGULAR, LIGHT, BRADNS。
推薦透過 JS 來載入 SVG 圖示
在 FontAwesome 5 中,除了過去以 CSS 使用 Webs Font 外(Web Fonts with CSS),也提供了在「桌機」上使用(Desktop Use),以及 Sprites, Package, APIs 等進階選項(Advanced Options)。更重要的是,在 FontAwesome 5 中推薦使用 SVG 搭配 JS 的方式(SVG with JS)來使用這些圖示。
載入 JS
把 svg-with-js 的資料夾複製一份到你的專案資料夾中(或者也可以直接使用 FontAwesome CDN),接著載入 JS 的方式非常簡單,就和過去載入 CSS 一樣,官方建議放在:
<script defer src="https://use.fontawesome.com/releases/v5.0.0/js/all.js">script>
<script src="https://use.fontawesome.com/releases/v5.0.0/js/solid.js">script> <script src="https://use.fontawesome.com/releases/v5.0.0/js/regular.js">script> <script src="https://use.fontawesome.com/releases/v5.0.0/js/fontawesome.js">script>
使用圖示
圖示的使用幾乎和過去一樣,在 HTML 中透過 標籤同時給予不同的 class 就會產生不同的圖示:
<i class="fas fa-camera-retro">i>
<svg class="svg-inline--fa fa-camera-retro fa-w-16" aria-hidden="true" data-fa-processed="" data-prefix="fas" data-icon="camera-retro" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="...(略)">path> svg>
※想知道更多請到以下連結喔,裡面會有更多的介紹喔,謝謝※
精選專案.網頁設計.RWD響應式網站.企業形象網站 / 環保類
網站技術:PHP . Javascript
各國提倡環境保護,從環境整潔、保護物種甚至是居住環境,本站致力於導入再生能源與綠建築。利用太陽能板、風力...等等增加更多能源。對於建築物來說題昌綠建築標章, 在選購家電上要挑選一級省電的標章也為環境出力。
網頁設計.RWD響應式網站 / 教育人文類
網站技術:PHP/MySql
提供免費的平台註冊成為師傅,教授專業技能與知識;成為會員尋找自己喜歡的師傅,購買教學課程。這裡不僅可以購買課程,甚至也能上架的自己的課程,推出更優質的課程造福許多會員。
網頁設計.RWD響應式網站.企業形象網站 / 教育人文類
網站技術:PHP/MySql
綠建築除了製作繪畫比賽的報名系統,後續為了推廣和綠建築相關的知識,特別製作教育資源網。裡面提供許多教學資源、影音畫面來向民眾說明綠建築的重要性。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策