❶ 如何使用Font Awesome字體圖標
Font Awesome 是一套專門為 Twitter Boostrap 設計的圖標字體庫。這標字體集幾乎囊括了網頁中可能用到的所有圖標，除了包含 Twitter Boostrap 的默認圖標外，還有社交收集圖標、Web 應用法度圖標和編輯器圖標等等，可以免費用於貿易項目。
下面僅記錄應用步調：
1.到官網高低載最新版本的Font Awesome.
2.解壓文件，將此中的css和fonts文件夾拷貝到項目中，此中css文件夾中有兩個css文件（font-awesome.css和font-awesome.min.css），fonts下有有5個，如下：
3.在須要應用的html或者其它類型的頁面中引入樣式文件，如下：
<link href="css/font-awesome.css" rel="stylesheet" />
4.查看font-awesome.css文件，若是引用的是緊縮版的，就要查看那個文件了，打開文件看到第一個樣式定義如下：
＠font-face {
font-family: ""FontAwesome"";
src: url（""../fonts/fontawesome-webfont.eot？v=4.1.0""）;
src: url（""../fonts/fontawesome-webfont.eot？＃iefix&v=4.1.0""） format（""embedded-opentype""）， url（""../fonts/fontawesome-webfont.woff？v=4.1.0""） format（""woff""）， url（""../fonts/fontawesome-webfont.ttf？v=4.1.0""） format（""truetype""）， url（""../fonts/fontawesome-webfont.svg？v=4.1.0＃fontawesomeregular""） format（""svg""）;
font-weight: normal;
font-style: normal;
}
必然重視此中的src:url（）中的路徑是不是當前與當前項目標實際路徑向匹配。
4.最後在頁面中參加響應的html元素，並且遵守font awesome定義好的樣式為須要添加矢量圖標的元素指定樣式。：
<div class="list-group">
<a class="list-group-item" href="＃"><i class="fa fa-home fa-fw"></i> Home</a>
<a class="list-group-item" href="＃"><i class="fa fa-book fa-fw"></i> Library</a>
<a class="list-group-item" href="＃"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a class="list-group-item" href="＃"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-car"></i>
<i class="fa fa-car fa-3x"></i>
別的，font awesome 和BootStrap連絡可以達到更好的結果。
❷ 如何製作自己的網頁字體圖標
從設計單獨的圖標開始，到把它們轉化成@font-face格式以備嵌入，乃至授權給他人使用，整個過程中我們將僅使用免費軟體和在線服務。感覺怎麼樣呢？你不必依託於任何深奧的知識就可以製作出一套成功的英文字體（包括字母和數字），而只需要眼睛來設計——你面對的可能是非常非常小的東西。
最終，你將會收獲一個製作設計元素的過程（方法），它的意義遠遠在製作出簡單的圖標之上。
在我們繼續之前，首先應該談談，究竟希望通過在設計中使用圖標達到什麼目的，又是什麼使得一個圖標比下一個更成功。先講理論再講應用。為了完成這個任務，我們必須思考圖標作為符號學的一部分，所扮演的角色。
什麼是優秀的圖標？
符號學，從廣義上來說就是研究符號系統，我們如何對它們的形成和維護做出貢獻，它們亦因我們對世界的理解而受到影響。
不論何時，當你從「它象徵著什麼」—— 它向你的觀眾傳達了什麼信息，或者它喚起了他們什麼概念——思考你的某一部分設計工作時，你就是以符號學家的角度來審視你的設計。符號學像其它語言學一樣，的確可以覆蓋一種語言，在一個網站上面，有很多東西不是通過文字表達出來的，例如顏色、字體、形狀（圖標）。每個人都應該注意的是，這些東西所表達的都含有一種很強的文化因素。在中國，紅色可以表示好運氣，而在很多西方國家，它卻意味著危險。
術語「icon」在符號學中有一個特殊的意思。icon是一個神器，通過相似表達某事物。例如，一個標記地圖位置的icon。它擁有一個類似真實的
地圖標記的形狀,因此它可以表示一個位置，反過來，真正的地圖位置標記使人們想起各種有意義的概念。其中這些有抽象的概念，比如地點；也有不太抽象的概
念，比如這個位置可能在什麼地方。
一些所謂的圖標並不具有真正意義的代表性。無處不在的RSS圖標，一個點和兩個同心圓弧段，沒有什麼比它更像Really Simple
Syndication 了。構成RSS圖標的形狀通過單獨約定具有象徵意義，對此我們已經達成了共識。不過，一個RSS圖標更適合被稱為RSS標志。
現在，我希望我們已經確定了下面兩項成功的網站icon需要遵循的准則：
要有與真實事物的相似點，例如，一個類似真實列印機的列印圖標。
你的圖標在符號系統中應該是一個熟悉的，可識別的標志。
字體圖標日益受到歡迎
Icon字體，由於其提供了一種圖標速記方式，長期以來被認為是一種加強型UI設計，它協助人們理解文本信息。Icon圖像以毒品傳播的速度在整個web設計社區流傳，使用它可以使你的設計更加亮麗、吸引更多用戶點擊。
與圖片相比，使用icon式字體是一個相對新的主意。然而，與圖片（背景圖片方式）相比，它具備很多固有的優勢，因此它的吸引力正在逐漸增長。早在9月初，我在微博上寫了它的一些好處，Chris Coyier顯然也有類似的想法，幾周之後也向更多觀眾介紹了它。基於以上兩篇文章和其它內容，我編寫了這個較為完整的特徵列表：
它們的尺寸能夠輕松調整，並且不會損壞圖像質量（作為矢量圖）；
給icon定義顏色和文本一樣簡單。例如，對於一個rss圖標，color:orange；
可以把許多icons排列在一個組中，也就是一個文件中，這樣只需要一次http請求就可以了;
正如Chris所指出的，它們在IE6中也可以借著透明性顯示出形狀（這一點 與PNG圖片不同）;
對於那些應該出現在文字附近的圖標，對齊方式和包裝都不是問題（因為它們是文本）;
你可以應用CSS3的text-shadow和background-clip:text效果，以便凸顯字型的形狀;
不像SVG，icon字體很容易實現跨瀏覽器兼容；
問題
Chris說過，使用icon字體是一個不錯的主意，我要告訴你。
盡管如此，icon字體的使用現狀並不理想。首先，一些優質的可用字體，如Pictos, Fico, Klepto, Cheetos, Ponyo 和 Sailor Moon都是收費的。實際上意味著真有兩個問題：
你或許不得不投資一部分錢。
無論你是否需要花錢，你將會被迫接受其他一些人的糟糕設計。
除了自動抓取程序，我假定主要是網頁設計師將會閱讀這篇文章。我是一個設計師，我不認為只有我一個討厭依靠別人的作品，使自己的設計思路大打折扣這
種事兒。當然，我更不喜歡那種有支付許可權的想法。我知道自己要使用什麼圖標，並且我知道如何才能使其適合我的整體設計。我想要那種控制力。
經過一些搜索，我想介紹一下Inkscape的svg字體編輯器。通過使用Inkscape和一款在線轉換器（SVG字體到TTF），我製作出了字體「Heyding」，這個字體在 Simurai』s list（由Coyier的文章鏈接到）中有介紹。我不打算將自己的字體賣給你（它是免費的），但是我想它會帶給你一個非常好的概念。
使用Inkscape製作icon字型
啟動Inkscape
我們先從下載和安裝Inkscape開始。你也應該使用我的icon字體啟動器模板，它們被放在這個GitHub倉庫的資源文件夾里（以後這個項目中還會有更多）。一旦你在Inkscape中打開了這個文件，你應該通過在主菜單中打開以下窗口來設置好你的工作空間：
OBJECT → FILL AND STROKE
OBJECT → ALIGN AND DISTRIBUTE
TEXT → SVG FONT EDITOR
在SVG字體編輯面板中，點擊「Font」下的「Font1」。現在，你的工作空間看起來應該有點兒像這個截圖：
值得指出的是， baseline不是在畫布的下邊界之下：如果你希望與相鄰的字體共享同一條基線，你的圖標應該很輕微地懸在畫布的底部。我已經用Georgia，Arial和一些網頁字體進行了測試。
製作你的第一個字型
為定義字型，點擊SVG字體編輯面板中的「Glyphs」選項卡，然後點擊面板下方的「Add
Glyh」按鈕。一開始你可能不太清楚，但如果你在你的字形（「字型1」）上點擊，一個欄位將會顯示出來，它要求你輸入你需要的圖標對應的字元。我們首先
要做一個簡單的星形，所以我建議你輸入的字元「s」，「S」或「*」：
現在我們已經定義了字型對應的字元，我們需要製作字型本身。由於這次我們僅僅要製作一個星星，我們應該從Inkscape左邊的工具欄中選擇有用的
Stars and Polygons tool
，然後，在畫布上繪制一個星星。你會發現，這個工具自帶的選項允許您更改星星的外觀。在我的例子中，選擇了角數為5，spoke
ratio為0.5，rounded value為0.1。
使用Align and Distribute panel（可能在SVG Font Editor下面隱藏著）使星星橫向居中，然後鄉下拖動形狀使觸及基線。關閉網格顯示之後，畫布看起來應該像這樣子：
在我們的icon字體中，字型只是形狀，沒有顏色、層級或者漸變的形狀。因此，為了使我們的星星成為一個合格的字體候選者，我們必須將它由一個對象
轉化成基於路徑的圖形。你可以通過在主按鈕上選擇星星，然後是PATH → OBJECT TO
PATH來完成這一任務。現在，選擇了星星之後，我們可以在SVG Font Editor 中，高亮顯示可用的「s」字型，然後點擊 Get
curves from selection按鈕：
當你在Sample Text 區域輸入「s」時，你的星星應該被預覽出來，如下所示：
製作更加復雜的icon
你已經製作出了第一個可擴展的SVG字體字型。通過使用Fill and
Stroke面板上的選項：編輯路徑節點，以及合並對象和筆畫，能夠使你做出更加不凡的icon設計。由於我們還有很多要講，我不想深入完成一個完整的
Inkscape教程，但是遵循下面的簡單規則會給你帶來好處：
堅持使用黑色筆畫和填充，只是為了提醒你：那些icon僅僅是形狀，而非復雜的矢量圖。為icon上色這件工作，我們會在最終產品中使用CSS來完成。
所有對象和筆畫（線條）必須被轉化成路徑（不管使用PATH → OBJECT TO PATH 或者 PATH → STROKE TO PATH）
當有多個對象和/或筆畫被用來完成一個icon字型時，它們應該被合並起來（使用PATH → COMBINE 或者，在某些情況下，使用 PATH → UNION）
為了在已有的形狀上剪切出想要的形狀，將形狀放置在主形狀上面，選擇兩個形狀，然後選擇 PATH → DIFFERENCE。點擊Get curves from selection ，黑色塊上面的白色區域剔除之後就是你要的形狀。
准備嵌入你的字體
假如你已經重復了很多次我剛才所描述的方法，創建了一些有用的圖標，並且，字體文件被保存為myicons.svg。現在，你將要准備好把這個圖標庫用於網頁中。
把SVG轉化成TTF
你應該採取的第一項措施是，將SVG字體格式轉換成一個更熟悉、更通用的格式。 TTF是一種用於本地安裝的卓越格式。同時，它還為再轉化成@font-face提供了一個良好的基礎。可以進行字體轉換的在線服務包括： http://onlinefontconverter.com，http://www.fontconverter.org和http://www.font2web.com。然而，我個人最喜歡的，是http://www.freefontconverter.com，因為我不會排隊，也從來沒看到它產生什麼故障。
我想，不需要向你介紹如何使用這個資源也足以顯示我的誠意了。醒目的文件上傳欄位，select元素和巨大的轉換按鈕會讓你迅速抓住重點，真的。
編輯字體信息
既然你已經獲得了一個TTF，我推薦你現在編輯產生的元數據。對字體進行重命名、添加屬性和描述，使它准備好被安裝、嵌入和分發。這也是一種聲明字體為你所創造的途徑。運行Windows的讀者可以選擇使用貌似很霸氣的 Microsoft Font Properties Editor或者允許免費使用X天的Typograf。對於蘋果和Linux用戶，我希望得到你們更好的意見。
重要提示：雖然Microsoft Font Properties
Editor允許您添加作者，描述和許可信息，它似乎並沒有讓你編輯字體名稱、附言名稱等基本數據。這些欄位是被禁用的。如果你想使用這些特殊的功能，你
需要在SVG轉換為TTF之前，在SVG代碼中編輯禁止的值。在你喜歡的文本編輯器（我用Notepad++）中打開原始的SVG，並編輯以下內容：
Font Name:標簽中可以尋找到, font-family 屬性
Postscript Name:標簽中可以尋找到, id屬性
Description:你應該在這個標簽中添加一個描述（作者、許可等）。請注意這與TTF描述文字是不同的，轉換過程中將不會被保留；你還需要為TTF添加單獨的描述信息。
嵌入字體
一旦你在本地系統中安裝了TTF，並且已經預覽過，確定沒有出現意外狀況，你就可以在Font Squirrel的 @font-face generator中運行它了。為了使輸出代碼的效率和效果盡量好，這里有幾個專家模式中的選項值得一提：
Subsetting：該選項允許您只運行需要的字元集（包括字元編碼、類型、語言等選項），減少文件大小。
Remove kerning:您的圖標將幾乎總是單獨出現，所以字距是沒有必要的。據稱，這也將減小文件大小。
WebOnly™:如果你希望您的字體僅僅用於web中，而非桌面- 你可以選擇此選項。它也可以更好地滿足您的授權計劃。現在我將介紹許可證。
發布字體
如果你有興趣發布你的字體，給它添加許可是一個比較好的做法。否則許多字體網站將不會帶它玩兒。由於我們製作圖標時使用的是免費、開源的軟體，發布時也不妨這樣做。
目前，有很多可用的授權選項，而逐一調查研究它們有時是令人費解的一件事。 GNU General Public License是完全可以接受的，但你可能要考慮SIL Open Font License。使用這種許可證的主要優點是，reserved font name：即允許其他設計師修改字體，但他們需要用不同的名字。在實踐中，這意味著，對圖標設計的一些不良行為不能以「你的名字」來進行。
有了這兩種許可，你還應該在一個文本文件中保存版本信息，同時在字體的元信息中插入版權聲明和完整許可的URL鏈接。如果需要更具體的說明，請訪問各自的許可證頁面（上面的鏈接）。
CSS spriting的終結者
為什麼要停下使用SVG字體做通用圖標的腳步？有了做圖標的能力，也就有了能力去設計出站點獨有的形狀、品牌元素和裝飾。這一點像CSS
sprities，所有這些視覺元素都可以保存在一個文件中，減少了伺服器調用http請求的次數；不過，icon字體的元素都可以調整大小，而不必依賴
於位置坐標（背景位置值）才能正確顯示。這使它們更適合於 responsive design。
讓我們假裝要選擇使用一個SVG字體去代替一些我的steampunk般的blog里基本的設計元素。組件設計的一個簡單的HTML表格呈現會是這個樣子：
關於這種方式，最好的事情就是通用性。舉例來說，從左邊的第二個齒輪形狀既可作為一個微小的圓點設計，又可以是一個巨大而抽象的背景裝飾。著色很簡
單：color:maroon，但沒有必要堅持扁平的顏色;多種CSS3效果疊加起來可以為它添加紋理和觸感。為了讓你一開始有所啟發，查看this excellent gallery of CSS3-enhanced webfonts。
關於屏幕閱讀器的快速筆記
以這種方式使用字體來顯示視覺元素的一個問題是，在屏幕閱讀器上輸出時會受到影響。直觀上的網站訪問者會看到齒輪，箭頭之類的圖標，但是屏幕閱讀器將堅持讀出指定這些設計的字元。對於使用裝飾性的SVG字體元素，我建議聽取Coyier的建議：為Unicode的Supplementary Private Use Area分配向量。這樣的符號不應該由讀者來讀出。
一個協作式icon web字體
作為我的JavaScript導師，Rupert，有一天向我指出，使用SVG字體來創建圖標集為合作提供了一個有趣的機會。你看，SVG的代碼 - XML的一種形式 - 是高度標准化而且輕松可讀的。正是源碼的順序讓我覺得，icon字體的開發很適合選擇像GitHub這樣的協作編碼服務。
這個想法契合了我想要的符號含義：如果一個圖標是由很多人協商之後一致確定的，那麼它的形成過程中也存在一定的「共識」。通過我們的圖標標識系統設計出來的，一定是最典型的圖標。我們應該創建一種屬於社區的icon詞彙，並且它對於需要的人來說是有意義的。
為了發展這個想法，我創建了一個公開的GitHub倉庫Community Icon Font，這個倉庫的文件結構並不復雜：仔細閱讀上面的Inkscape教程和項目主頁的內容應該可以為你解答所有的疑惑。如果你是GitHub的新成員，嘗試閱讀它們的幫助頁面，或者問問你附近的技術人員（我正是這樣做的）。
❸ 玩轉響應式圖標設計
什麼是響應式圖標設計?
響應式設計主要講的是布局，那麼什麼是響應式圖標?響應式圖標設計是一種根據屏幕尺寸來改變圖標類型、從而達到更好可讀性的設計。
圖標為什麼要響應式?
怎樣閱讀內容?時至今日，我們用來閱讀內容的平台越來越多。設備、屏幕解析度、瀏覽器、平台——我可以拿著5S+Safari+iOS7.0瀏覽網頁，也可以拿著1020+Chorome+WP8瀏覽網頁。
各種選擇，各種搭配實在是太多了，這些都或多或少的影響了內容的可讀性。而圖標作為一種視覺語言，可讀性非常重要。
圖標設計，首先要滿足易於理解。其次，圖標的可讀性必須高。在小尺寸的情況下，圖標設計為了追求更高的辨識度/可讀性，可以選擇犧牲一點美感。
那麼能不能美感、可讀性兼得呢?圖標設計的藝術便在於二者的平衡，取與舍。怎樣設計，讓不同尺寸的圖標均能展現美感，同時又具備可讀性?
我認為，需要根據尺寸范圍進行圖標響應式的優化
這個理念不是新的。對於柵格化圖標來說，這種設計方法很常見。
在網頁設計中，很多設計師錯誤的認為，只要簡單的縮放圖標即可達到完美的可讀性。但實際上並非如此。
每款圖標需要三種不同的尺寸，通過使用代碼，來自動進行可讀性優化。
簡單的方法和復雜的方法
有兩種最基本的優化方式。一種依靠假定，另外一種更精確。一種簡單，一種復雜。
簡單的方法是使用Media
Queries根據屏幕寬度來調整圖標，這種方法奏效的原因是因為，內容的大小通常由屏幕的大小決定——也就意味著，桌面版的圖標應該比手機版的圖標大。(或許是這樣吧?)
但是這種方法太被動了，不是嗎?應該化被動為主動，正確的做法是，讓圖標元素具備響應式功能——圖標會依據圖標本身的大小來進行選擇(3選1)，更具伸縮性，更靈活，適應面也更廣。雖然有點復雜。
具體細節
注意：
下面提出的僅僅是概念，這些代碼還沒有完成，測試版也沒有發布。我們正處於研發階段，我們需要Kickstarter的眾籌。
但並不妨礙我為大家上述這種響應式圖標設計的思想。
簡單的media-queries(圖標的外觀根據屏幕尺寸來變)
這是最簡單的方法。圖標設計的核心是SVG，但其實，我們可以把圖標設置成一種字體，這樣就能起到很好的響應式效果。將圖標的大小看成字重。然後作為字體的圖標會根據屏幕的大小來改變字重。可以看看下面這個Demo，圖標根據屏幕寬度響應式改變。
Web字體和element-query(圖標的外觀根據圖標尺寸來變)
正如前面提到過的那樣，根據屏幕大小來改變圖標顯示種類，這終歸不是一個好辦法。圖標的顯示種類還是要根據自身的尺寸來變。下面這個Demo使用了Element
Queries以及Web字體，打造了一種圖標動態調節的效果。
SVG
斷點
SVG斷點法，依賴media
queries，以及SVG文件，會根據圖像尺寸，進行一系列的觸發，較上者效果更好，可以看看下面的demo
結論
更靈活、可讀性更高的響應式圖標設計需要某種方法，我們正在努力的思考圖標尺寸、圖標外觀、屏幕尺寸的關系，爭取早日找到一種簡單、高效的解決方法。
❹ 將圖標轉換成web字體 我顯示不出來的
字體文件創建好了，你可以先用word試試么...
❺ 移動應用中字體圖標怎麼製作
對於可縮放的自適應設計來講，Icon fonts是一種驚人的解決方案。
在開發native app時，你應該記住icon fonts技術有多項超過點陣圖的高級特性，這些特性所帶來的好處會影響你的設計工作流，以及產品的最終品質。
可縮放性（Scalability）：
基於字體的icon是與解析度無關並能縮放到任何想要程度的技術。你的圖標看起來毫不關心retina,HDPI,XHDPI等等屏幕，但渲染時會根據目標設備自動調整，你將有能力應對任何當下，未來，或大多數任意規格的設備
尺寸（Size ）：
裁剪到正確的比例，icon font的文件的大小要比起點陣圖小到難以置信的程度，使用icon font時，你不需要根據不同設備准備不同的圖片，你的APP只需要在啟動時載入一次icon font文件即可。
可維護性（ Maintainability ）：
自你的icon打包進一個字體文件，在項目自始至終你僅需要維護這個單一的字體文件。
通過管理字體文件你可以很自然的組織你的icon集合，任意的進行修改或擴展
可推廣性（Adoption）：
然而，應用這樣的icon fonts可能會影響你和你同事之間的工作流程，但說服讓他們採用這樣的技術也非常簡單，有數款免費或收費的工具幫你輕松達到目的並能看到很好的應用結果，在幾乎任意（手機）移動平台、瀏覽器或操作系統
靈活性（Flexibility）：
應用icon fonts技術中最有意義的一項能力是可以操縱icon fonts， 改變顏色，大小，僅僅幾行代碼就可以在瞬間改變外觀
可交互性(Interactivity)：
由於靈活性以及能夠通過代碼方便的操縱，icon fonts 是獨一無二的在運行時被操縱，通過應用icon fonts技術， 你能輕松的在不同狀態顯示對應的不同效果，創建動畫。
雖然icon
fonts為設計提供了眾多好處為一些有趣的設計提供可能性，自然地，它也不是全權的解決方案。一旦你的設計中需要的顏色超過一種，實現復雜的視覺設
計，icon font就有限制了。無認如何，主流與非主流的icon
fonts都能在互聯網上找到，在我們使用之前web設計界已經很流行了，並有很多服務幫你創建夢幻的icon fonts集合
通過xcode中的outlet connection, 在view呈現後，你還能很方便的改變label
Using icon fonts on iOS
在IOS中使用字體圖標
在IOS中應用icon font非常的簡單粗爆。在一開始你最好通過使用Fontello或IcoMoon收集一些圖標並整合進你的APP。另一種方法是你自己花時間自己做出來，但創造性的工作的總要花掉你很多時間。
那麼現在我們僅僅需要將得到的icon整合進我們的APP
你只需要懂得IOS開發基本的文件結構以及.tff後綴的字體文件icon font
為了測試icon font技術，我們在Xcode內新建一個 Single View Application 的工程。工程建完後就把你的字體文件復制進工程目錄，如果不出什麼意外，你應該在你的 Project Navigator 中看到對應的字體文件了
為了讓Xcode理解你將要如何使用導入的文件，你得在你的應用程序的Info.plist內建立「鏈接」。這個plist文件在Supporting
Files文件夾內，表現為meta
data即可理解為hash表。為了在編譯app時能包含進你的字體文件，在list上簡單新建一行（右鍵然後add row）名字選擇為 Fonts provided by application ，在其下給字體文件取個名字，名字就是你的應用程序中用來識別你的字體文件的。在我們這個測試工程中，值為fontello.ttf。現在Xcode知道了我們導入的文件能幹什麼，我們能在程序中使用導入的字體文件了
把你的app切換到storyboard模式，在view中你喜歡的地方放一個label組件用來顯示icon，在設置完label後，我們需要建立一個outlet。
在storyboard中做這些事情都很簡單，在 Assistant Editor Mode模式下
此模式下顯示了你的圖形界面和ViewController界面。現在簡單的按住ctrl鍵，從label組件拖動就會現線條，直接拖線條到
ViewController到@interface這行代碼上放開就會彈出一個小界面，輸入名稱，比如
iconLabel，outlet就建成了，代碼中你會發現多了下面這樣一行：
@property (weak, nonatomic) IBOutlet UILabel *iconLabel
現在你就能通過代碼來控制label組件了，通過編輯ViewController（.m後綴的文件）設置label。在viewDidload方法內加入以下幾行代碼，就像下面那樣
( void)viewDidLoad{
[super viewDidLoad];
[iconLabel setFont:[UIFont fontWithName:@"fontello" size:130]];
[iconLabel setText:[NSString stringWithUTF8String:"\u2692"]];
}
添加的第一條代碼用來定義字體應用於label並設置字型大小，這里我們設置了130pt
在使用這些命令時要注意字體名稱，這里要填寫字體的真實名稱，即在字體簿打開的字體名或任何其它編輯器內能顯示的字體名稱。特別注意這點，因為字體名很可能與字體文件名稱不一樣
在第二行中文字用Unicode字元 Hammer and Pick (2692) 編碼。
雖然有點神秘，獲取icon字體的unicode字元編碼還是比較容易的。可以使用字體編輯器，或者直接上傳到Icon Moon這類網站，你可以毫不費力的將icon字體轉換成unicode編碼
你可以通過Android XML 語法來申明任何你想要的UI屬性
Colours, gradients and shadows
現在icon「引用」已經建立，你都搞定了。在我們通過代碼操作label前，你得先運行看看你的工作成果。最終，這也是你將icon字體合並進app所要做的。從現在開始有趣的事兒才開始。文本的所有操作都由你掌控了，例如：顏色，透明度，漸變，陰影。
例如應用以下幾行代碼 ，讓icon變成紅色+陰影：
iconLabel.textColor = [UIColor redColor];
iconLabel.shadowColor = [UIColor blackColor];
iconLabel.shadowOffset = CGSizeMake(1.0f, 1.0f);
有許多效果可以使用。一些相對來說比較復雜，但所有文本效果都通用。動畫或任何復雜的操作只要你能想到的都可以做了
Using icon fonts on Android
在Android中應用字體圖標
同樣的，在開發Android應用時也一樣能使用icon fonts就像用在ios上面一樣，能得到一樣的好處。
就應用范圍而言，Android更加有意思更有用。因為Android有著更多不同解析度，不同屏幕的設備平台。最重要的是Android默認不支持矢量圖形，這對開發者和設計人員面對不同Android設備時可是一個重大打擊
在開始開發你的新Android應用之前，你僅需要知道一個app最基本的文件構架，同樣的icon
font文件也是.tff後綴，使用包含了Android ADT的Eclipse IDE，你可以開始新建一個Blank
Activity的Android Application
Project。在項目設置後，復雜.tff文件到你的資源文件目錄內。一旦復製成功，Package Explorer面板內應該能看到
接下來，在你的Main Activity
View內創建一個TextView。你可以在layout文件夾內找到你的資源文件。文件名應該是
activity_main.xml。在多數情況下，Android SDK已經將一個文本為「Hello
world」的TextView放到了你的View內，我們就能使用這個TextView了。
在定義Icon各屬性後，你能在模擬器內看到你的icon了。
為了操作TextView,我們需要將圖形模式切換到切換到XML View內。現在為TextView添加一個ID，以便接下來UI和代碼建立引用關系
你的TextView應該看起來像下面這樣
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world"
android:id="@+id/iconLabel" />
通過使用ID，我們能夠在APP內任何地方操作TextView。現在你可以切換到MainActivity.java文件添加一些代碼來載入icon font了。在 MainActivity內有一個方法名為onCreate的方法。載入和應用icon fonts都在此方法內，如下
TextView iconLabel = (TextView) findViewById(R.id.iconLabel);
Typeface font = Typeface.createFromAsset(getAssets(), "fontello.ttf");
iconLabel.setTypeface(font); iconLabel.setText("\u2692");
和上面的IOS例子很像，通過引用到label組件，我們告訴Android應該使用哪個自定義字體到TextView上面。之後幾行使用Unicode字元編碼，這次以JAVA方式而已。運行程序後你就可以看到你的icon在Main Activity的View上了
在應用成功後，你可以根據你的需要操作icon了。Android UI構建通常由interface
builder或組織XML文件來實現，要添加一些效果，只要回到Main Activity的XML部分找到添加了Label
ID的地方，添加一些代碼就可。例如添加以下代碼會讓你的icon變大，帶點透明的紅色，並伴有陰影。
android:id="@+id/iconLabel"
android:textSize="120dp"
android:textColor="#ccff0000"
android:shadowColor="#99000000"
android:shadowRadius="2" />
有很多的效果可以應用。就像在IOS中一樣，動畫或者復雜的操作都由你掌控了。最大的好處是自定義的icon fonts可以廣泛的適配各類操作系統。任何支持自定義icon fonts的平台都允許你使用全新的這些效果
❻ web前端怎麼用iconfont 調節字體大小
iconfont的使用
平時的網頁開發該如何使用iconfont？在這邊微信小編給大家推薦一個工具：Iconfont-阿里巴巴矢量圖標庫。
WEB前端開發，圖標的快速製作
❼ 如何製作icon-fontweb字體ttf
使用icon font來生成圖標相對於基於圖片的圖標來說，有如下的好處： 1.自由的變化大小 2.自由的修改顏色 3.添加陰影效果 4.IE6也可以支持 5.支持圖片圖標的其它屬性，例如，透明度和旋轉等等
❽ web前端開發常用又好用的幾個軟體
前端開發是創建Web頁面或app等前端界面呈現給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術、框架、解決方案，來實現互聯網產品的用戶界面交互。Web前端的學習起來相對簡單，未來的發展前景也是非常不錯的。
web全棧工程師5.0課程包括：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。
想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，能夠在校期間取得大專或本科學歷，中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的，建議實地考察對比一下。
祝你學有所成，望採納。