整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天簡單分享一下在Axure RP 8 中如何使用 Font Awesome 圖標庫完成設計。
在做交互設計的時候，作為產品設計師我們常常需要用一些標準的圖標庫，通過導入現成的圖標可以極大地提高我們的設計效率。常用的圖標庫，一般提供SVG，PNG圖片，設計師下載以后可以直接用到交互設計文件中，開發同學將圖片文件放在圖標文件夾中供頁面代碼使用，例如：
但這種古老的方式，對于前端開發人員來說并不方便。所以新一代的圖標庫，他們提供給設計師矢量圖片( SVG格式或字體格式），設計師在設計稿中記錄該圖標的名稱，并告知前端開發人員。在開發過程中，前端同學通過調用圖標庫提供的CSS樣式，并填上對應圖標的名稱，便可以快速在Web上呈現出各種精美的矢量圖標，例如：
今天我們重點講述，如果規范使用Font Awesome圖標庫完成交互設計，并讓前端同學快樂地跟我們合作。
Font Awesome為您提供可縮放的矢量圖標，您可以使用CSS所提供的所有特性對它們進行更改，包括：大小、顏色、陰影或者其它任何支持的效果。官方網頁為： http://fontawesome.io
對于英文不是太好的同學可以訪問由“極風游科技”提供的 中文頁面： http://fontawesome.dashgame.com
選擇頁面頂部的“圖標”按鈕，可以看到所有圖標的分類：
選擇”手勢“，網頁自動跳轉出到所有”手勢“圖標部分，點擊圖標最后的”復制“按鈕，可以復制到該圖標的名稱，如下紅框所示”hand-o-right”，這里非常重要，這個名稱對于設計師之后導入圖標到Axure 或者 前端同學都非常有用。
由于Font Awesome圖標庫是基于字體來使用的，所以我們首先需要在官方主頁的最上面點擊”立即下載”（目前最新版為 V4.7.0）, 然后解壓壓縮包，點擊 “TrueType 字體文件”，完成字體的安裝：
網上很多網友推薦加載Font Awesome的元件庫，以此快速完成圖標的使用。但是筆者認為由于Font Awesome經常更新，而對應的Axure 元件庫很難快速更新，所以建議大家自己在官網上通過圖標的分類，快速選擇自己心儀的圖標，獲取名字以后，在圖標庫中搜索定位圖標，然后復制粘貼到Axure中使用即可。
但是由于之前的頁面只允許我們復制圖標的名字，沒法直接復制 圖標，所以我們沒法在Axure中將圖標使用。所以我們需要去到”字體庫的圖標備忘單頁面“ ( http://fontawesome.io/cheatsheet/) ，按名字搜索圖標。例如：我們之前選擇向右的手勢為 “hand-o-right”, 然后我們在CheatSheet頁面搜索（Ctrl+F）到該圖標，如下所示：
然后我們復制紅框中的手勢圖標貼入Axure中，但是我們發現圖標沒有出現，而是一個方框：
原因是字體默認為Arial,我們切換為 Font Awesome,以后圖標正常顯示：
但是需要注意我們一定更要在該圖標的說明里面備注圖標的名字，這樣便于前端同學開發時快速完成代碼的編寫，如下圖所示：
但我們完成設計以后，需要將線框圖發布成HTML文件，這時候如果將文件放到一個沒有安裝過Font Awesome 字體的電腦上，字體圖標可能無法顯示，所以我們需要在發布的時候做一些手腳。
首先我們點擊頁面右上角的 發布-生成HTML文件…
為了確保以后用來查看線框圖的電腦在斷網的情況下同樣可以正常查看，我們需要采用離線字體的方式完成HTML文件的生成。如下圖所示，添加Web字體時，我們選擇@font-face，并在具體參數處填寫：
font-family: FontAwesome;
src:url(‘fontawesome-webfont.ttf’) format(‘truetype’);
然后將TrueType字體庫放入HTML文件所在的文件夾里面，如下圖所示：
然后我們將整個文件夾拷給前端同學他們就可看到了，如下圖所示：
為了確保我們無法訪問Font Awesome官網時也可以快速復制圖標貼入Axure中，我們可以將 Font Awesome 的CheatSheet 備份為PDF文件。在Chrome瀏覽器中，輸入 http://fontawesome.io/cheatsheet/，然后鼠標右鍵選擇 打印，如下圖所示：
注意： 如上圖紅框所示，請將目標打印機選擇為”另存為PDF“，只有這樣生成的PDF文件中的 圖標才是可以復制的。
Font Awesome圖標使用在幾乎任何地方，只需要使用CSS前綴 fa ，再加上圖標名稱（前端同學可以查看設計同學線框圖中的注釋）。 Font Awesome是為使用內聯元素而設計的。我們通常更喜歡使用 <i> ，因為它更簡潔。 但實際上使用 <span> 才能更加語義化。如下所示：
<iclass=”fa fa-hand-o-right”></i>fa-hand-o-right
由于藕不是前端攻城獅，所以不敢班門弄斧了，具體可以去網站上看看用法，如下所示：
好啦，到目前為止，大家應該很清楚Font Awesome應該如何使用了吧，快去試試吧。
本文由 @邏輯畫瘋 原創發布于人人都是產品經理。未經許可，禁止轉載。
Easy-ICON 是一款高顏值、簡單易用的web字體圖標庫，只需引入一個css文件（或一個npm包），您就可以簡單地使用1000多個漂亮的圖標。
https://gitee.com/theajack/easy-icon
https://github.com/theajack/easy-icon
以下是css文件引入的一個簡單例子
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="easy-icon-all.css">
</head>
<body>
<i class="ei-heart ei-xs" style="color: red;"></i>
<i class="ei-spinner-indicator ei-spin"></i> <!--一個旋轉的loading-->
<i class="ea-star-half-empty"></i>
<i class="et-like ei-l"></i>
<i class="ef-html5 ei-xl"></i>
<i class="el-goods ei-4x"></i>
</body>
</html><link rel="stylesheet" href="easy-icon.css">
<link rel="stylesheet" href="easy-icon-a.css">
<link rel="stylesheet" href="easy-icon-f.css">
<link rel="stylesheet" href="easy-icon-t.css">
<link rel="stylesheet" href="easy-icon-l.css">或者使用一個集合的版本
<link rel="stylesheet" href="easy-icon-all.css">npm i easy-icon;只需要引用一次即可:
與css文件引用一樣，可以模塊獨立引用，無需使用全部
import 'easy-icon';
import 'easy-icon/easy-icon-a.js';
import 'easy-icon/easy-icon-f.js';
import 'easy-icon/easy-icon-t.js';
import 'easy-icon/easy-icon-l.js';或者使用集合版本
import 'easy-icon/easy-icon-all.js';Easy ICON使用起來十分簡單，您只需要在您想要使用的地方插入一個如下的標簽即可:
<i class="ei-spmile"></i>需要注意的是，五個模塊對應的前綴不一樣，分別為
讓圖標旋轉，可以通過添加 ei-spin 類來使圖標旋轉:
<i class="ei-spinner-snake ei-spin"></i>ei-spin 類對五個模塊表現一致
選擇尺寸
Easy ICON 內置了八種不同大小的尺寸，從小到大依次為::xs,s,l,lg,2x,3x,4x,5x
尺寸類對五個模塊表現一致
<i class="ei-smile ei-s"></i>
<i class="ei-smile ei-xs"></i>可以使用任何自定義css樣式來覆蓋默認的樣式
easy-icon是一個開源不久的字體圖標庫，集成了1500+個圖標，方便安裝，使用簡單！可以嘗試！
開發人員需要語法突出顯示工具作為輔助符號的一種形式，以幫助我們在結構化編程語言或標記中編寫代碼。有些代碼高亮庫附帶了額外的功能，例如拼寫檢查器，代碼折疊，以及提高文本上下文中總體代碼可讀性的功能，從而使編碼人員可以檢測可能跨越幾頁的代碼中的錯誤。筆者將在本文介紹10個語法高亮庫
SHJS是一個JavaScript庫，可以在瀏覽器上突出顯示客戶端的HTML源代碼。它使用GNU源代碼突出顯示的語言定義，從而使其能夠突出顯示以多種語言編寫的源代碼。SHJS帶有Highlight程序中的幾個主題，并根據GNU v3許可證分發。
http://shjs.sourceforge.net/
SyntaxHighlighter是功能齊全的客戶端語法突出顯示工具。
https://github.com/syntaxhighlighter
Highlight.js是Web的語法突出顯示庫。它的功能包括對185種語言和89種樣式的支持。它具有自動語言檢測和多語言代碼突出顯示功能。它也可用于所有node.js，并可以與任何標記一起使用，并且與任何其他JS框架完全兼容。
https://github.com/highlightjs/highlight.js
Rainbow是一個輕量級的代碼突出顯示器（1.4kb），只需要一個JS模塊即可突出顯示所展示的語言。顏色和字體是通過CSS主題支持定制的。通過按快捷鍵組合，它可以幫助開發人員輕松按顏色跟蹤許多變量。
https://github.com/ccampbell/rainbow
Microlight.js是一個開源庫，通過突出顯示（盡管提供了編程語言）并且沒有其他語言包或樣式來改進代碼段。與其他代碼突出顯示庫不同，它使用常規突出顯示策略。它突出顯示代碼，而不考慮編程語言或代碼結構。
https://github.com/asvd/microlight
CodePress是一個基于Web的編輯器，其語法突出顯示代碼是用JavaScript編寫的。在瀏覽器上輸入文字時，它將實時為文本著色。它具有代碼片段，快捷方式，自動完成和多窗口功能。
http://codepress.sourceforge.net/
JavaScript Syntax Highlighter（Jush）用于以以下語言突出顯示客戶端語法：HTML，JavaScript，CSS，PHP，HTTP和SMTP協議，SQL，PHP.ini和Apache配置。
https://jush.sourceforge.io/
Prism.js是一個輕量級的語法突出顯示工具，它考慮了可擴展的內置現代Web標準。如今，它已在數千個網站中實現。它簡單，直觀，輕如羽毛，高度可擴展，更快且易于樣式化。
https://prismjs.com/
Syntax.js是一個簡單的代碼語法突出顯示庫，對于任何編程語言而言，該語法都很小，靈活，主題化且速度更快，它有三個內置主題：
https://github.com/rainner/syntaxy-js
CodePrinter是一個JavaScript可視代碼編輯器，它支持語法突出顯示，自定義代碼格式以及13種內置主題。
https://www.cssscript.com/demo/lightweight-code-editor-with-pure-javascript-codeprinter/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
