將所有的圖示分成四大類
在 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
精選專案.網頁設計.RWD響應式網站.行動版網站.企業形象網站 / 電子工業類
網站技術:PHP . Javascript/MySql
全台唯一自有工廠及正式品牌授權 (Samsung、Walsin、PDC、Kamaya)的被動元件代理製造商與經銷商,在半導體供應鏈站有一席之地。
網頁設計.RWD響應式網站.活動網站 / 其他類
網站技術:PHP
本活動網站呈現方式主要獎品說明、抽獎流程與花絮,完成任務時都可以回到網站來確認中獎結果。有不清楚的地方也可以點選右上角客服位置喔。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策