1，Iconfont-阿裏巴巴矢量圖標庫
阿裏巴巴的免費矢量圖庫提供矢量圖標下載、在線存儲、格式轉換等。，可以用中文搜索，直接在搜索框中輸入所需內容即可出現相應的素材。只要點擊下載圖標，網站還支持在線修改顏色，真的是壹個很獨特的網站。
2、NounProject
壹個基於平面設計師的圖標分享平臺，提供高質量、可識別的圖標。用戶可以通過網站右上角的圖標找到類別，篩選出妳想要找到或使用的logo圖標。這些類別包括動物、食品和飲料、生活護理、人、安全和預警、科學、體育和娛樂、交通、旅遊、天氣和自然。
3、偶像忍者
IconNinja是壹個高質量的免費圖標素材搜索下載平臺，支持近654.38+0萬免費圖標。根據文件格式、圖片寬度、高度、文件大小等信息，用戶可以根據自己的需求進行選擇，特別適合前端工程師或PPT設計師使用。
4、圖標8
Icons8是壹個高質量的免費圖標資源網站，支持在線變色、添加文字或背景裝飾等。下載素材時，用戶可以選擇SVG、EPS、PNG、PDF四種下載格式，方便用戶在不同場景下使用。
5、聖像公園
IconPark是Bytes出品的開源圖標庫，可以將單壹的SVG源文件轉化為多種主題，網站分類詳細，代碼更輕，用戶使用場景更靈活。致力於構建高質量、統壹、可定義的圖標資源，讓大多數人都能選擇自己風格的圖標。
如何用ps制作小圖標方法壹:直接打開ps和。
創建ctrt+N，創建壹個高度和寬度都為256像素的圖片，(我個人測過，如果高度和寬度大於256像素，就不能保存為ico格式)，控制高度和寬度像素小於256，然後拖動自己的圖片保存為CTRT+Shift+S-選擇保存ico格式。然後，會出現壹個對話框，選擇第二個選項。就這麽幹吧
方法二，打開ps，打開自己的圖片，ctrt+alt+i調整圖片大小，高度和寬度控制在256像素以內。這個也做過實驗，大於256像素時，如圖:
當小於等於256像素時，如圖，可以保存，保存時可以選擇ico格式。此時文件幾乎不到150K K。
選擇保存路徑，單擊保存，然後選擇第二個選項:png(vista)。點擊確定即可。(如果妳選擇了第壹種，那麽這個文件基本就是失敗的。)
如何制作自己的網頁字體圖標？從設計單個圖標到轉換成@font-face格式進行嵌入，甚至授權他人使用，整個過程我們只會使用免費軟件和在線服務。妳感覺如何？做壹套成功的英文字體(包括字母和數字)不壹定要靠什麽高深的知識，只需要妳的眼睛去設計——妳面對的可能是非常非常小的東西。
最終妳會收獲壹個制作設計元素的過程(方法)，這遠比制作簡單的圖標有意義。
在我們繼續之前，我們應該先談談我們希望通過在設計中使用圖標來實現什麽，以及是什麽讓壹個圖標比下壹個圖標更成功。先理論，後應用。為了完成這壹任務，我們必須考慮作為符號學壹部分的圖標的作用。
什麽是優秀的圖標？
廣義的符號學是對符號系統的研究。我們如何為它們的形成和維護做出貢獻？他們也受到我們對世界的理解的影響。
每當妳從“它象征著什麽”——它向妳的觀眾傳達了什麽信息，或者它喚起了什麽概念——的角度思考妳設計作品的壹部分時，妳都是在從壹個符號學家的角度看待妳的設計。符號學和其他語言學壹樣，確實可以涵蓋壹門語言。在壹個網站上，有很多東西不是用文字表達的，比如顏色、字體、形狀(圖標)。大家要註意的是，這些東西表達的東西，包含了很強的文化因素。在中國，紅色意味著好運，但在許多西方國家，它意味著危險。
“圖標”壹詞在符號學中有著特殊的含義。圖標是通過相似性來表達某種東西的人工制品。例如，標記地圖位置的圖標。它也有類似的現實。
地圖標記的形狀，所以它可以代表壹個位置。反過來，真實的地圖位置標記又讓人想起各種有意義的概念。其中，有抽象的概念，比如位置；也有不那麽抽象的概括。
例如，閱讀這個位置可能在哪裏。
有些所謂的圖標並不真正具有代表性。無處不在的RSS圖標，壹個點和兩個同心弧段，沒有比這更簡單的了。
辛迪加。組成RSS圖標的形狀是通過單獨的協議來象征的，我們已經達成了* * *。然而，RSS圖標更適合被稱為RSS標誌。
現在，我希望我們已經確定了以下兩個成功網站圖標的標準:
應該和實物有相似之處，比如壹個類似於真實打印機的打印圖標。
妳的圖標應該是符號系統中熟悉的可識別的符號。
字體圖標變得越來越流行。
圖標字體，因為它提供了壹種圖標速記方法，長期以來被認為是壹種增強的UI設計，有助於人們理解文本信息。圖標形象以毒品傳播的速度在整個網頁設計社區傳播。使用它可以讓妳的設計更明亮，吸引更多的用戶點擊。
與圖片相比，使用圖標字體是壹個相對較新的想法。但與圖片(背景圖片)相比，它有很多先天優勢，所以它的吸引力也在逐漸增加。早在9月初，我就在微博中寫了它的好處，ChrisCoyier顯然也有類似的想法，幾周後就把它介紹給了更多的受眾。基於以上兩篇文章和其他內容，我整理了這個比較完整的特性列表:
它們的大小可以在不損害圖像質量的情況下輕松調整(作為矢量圖)；
為圖標定義顏色就像文本壹樣簡單。例如，對於壹個rss圖標，顏色:橙色；
很多圖標可以排成壹組，也就是壹個文件，這樣只需要壹個http請求；
正如Chris所指出的，他們還可以在IE6中通過透明來顯示形狀(這與PNG圖片不同)；
對於那些應該出現在文本附近的圖標，對齊和打包都不是問題(因為是文本)；
您可以應用CSS3的文本陰影和背景剪輯:文本效果來突出字體的形狀。
與SVG不同，圖標字體很容易跨瀏覽器兼容；
問題
克裏斯說使用圖標字體是個好主意，我想告訴妳。
盡管如此，圖標字體的使用並不理想。首先，壹些高質量的可用字體，如Pictos、Fico、Klepto、Cheetos、Ponyo和SailorMoon都是收費的。事實上，這意味著確實存在兩個問題:
妳可能需要投資壹些錢。
不管需不需要花錢，都會被迫接受別人的爛設計。
除了自動爬蟲，我認為主要是網頁設計師會閱讀這篇文章。我是壹個設計師，我覺得不是只有我壹個人討厭依賴別人的作品，這讓他的設計思路大打折扣。
類似的事情。當然，我不喜歡有權付錢的想法。我知道我想用什麽圖標，也知道如何讓它適合我的整體設計。我想要那種控制。
經過壹番搜索，我想介紹壹下Inkscape的svg字體編輯器。通過使用Inkscape和壹個在線轉換器(SVG字體到TTF)，我制作了字體“Heyding”，這是在Simurai的列表中介紹的(由Coyier的文章鏈接)。我不打算把我的字體賣給妳(它是免費的)，但我認為它會給妳帶來壹個非常好的概念。
用Inkscape制作圖標字體
啟動Inkscape
讓我們從下載並安裝Inkscape開始。妳還應該使用我的圖標字體啟動器模板，這些模板放在這個GitHub資源庫的resource文件夾中(以後這個項目會有更多)。在Inkscape中打開此文件後，您應該通過在主菜單中打開以下窗口來設置您的工作區:
對象→填充筆畫
對象→對齊和分發
文本→SVGFONTEDITOR
在“SVG字體編輯”面板中，單擊“字體”下的“Font1”。現在，您的工作區應該看起來有點像這個屏幕截圖:
值得指出的是，基線並不在畫布的下邊界以下:如果妳想和相鄰的字體font * * *)共用同壹條基線，妳的圖標應該稍微懸浮在畫布的底部。我用Georgia，Arial和壹些網絡字體測試過。
制作妳的第壹個字體
要定義字體，請單擊SVG字體編輯面板中的“字形”選項卡，然後單擊面板底部的“添加”
Glyh”按鈕。壹開始妳可能不太清楚，但是如果妳點擊妳的字體(“字體1”)，就會顯示壹個字段，要求妳輸入與妳需要的圖標對應的字符。首先，讓我們.../我們首先/我們開始於/我們開始於
要制作壹個簡單的星號，所以我建議妳輸入字符“s”、“s”或“*”:
現在我們已經定義了字體對應的字符，我們需要制作字體本身。既然這次只想做壹顆星，那就從Inkscape左邊的工具欄裏選擇有用的吧。
星星和多邊形凳子
然後，在畫布上畫壹顆星星。妳會發現這個工具帶有選項，允許妳改變星星的外觀。在我的例子中，我選擇的角度數為5，輻條。
比值為0.5，取整值為0.1。
使用AlignandDistributepanel(可能隱藏在SVGFontEditor下)將星形水平居中，然後拖動國家中的形狀接觸基線。關閉網格顯示後，畫布應該如下所示:
在我們的圖標字體中，字體只是形狀，沒有顏色、層次、漸變形狀。所以，要想讓我們的星成為合格的字體候選，就必須從壹個物體來改變它。
轉換為基於路徑的圖形。可以選擇主按鈕上的星號，然後選擇路徑→對象到。
完成此任務的路徑。現在，選擇星號後，我們可以在SVGFontEditor中突出顯示可用的“S”字體，然後單擊Get。
曲線選擇按鈕:
當您在SampleText區域鍵入“s”時，您的星號應該可以預覽，如下所示:
制作更復雜的圖標
您已經創建了第壹個可擴展的SVG字體。通過使用菲蘭德
“描邊”面板上的選項:編輯路徑節點以及合並對象和描邊可以讓您做出更加非凡的圖標設計。既然我們還有很多要談的，我也不想深究壹個完整的。
Inkscape教程，但是遵循這些簡單的規則將使您受益:
堅持使用黑色筆畫和填充，只是為了提醒妳那些圖標只是形狀，而不是復雜的矢量圖。我們將使用CSS為最終產品中的圖標著色。
所有對象和筆畫(線條)都必須轉換為路徑(無論是使用路徑→對象路徑還是路徑→筆畫路徑)。
當使用多個對象和/或筆畫來完成壹個圖標字體時，應該合並它們(使用路徑→組合，或者在某些情況下，使用路徑→聯合)。
為了從現有形狀中剪切出所需的形狀，請將該形狀放在主形狀上，選擇兩個形狀，然後選擇路徑→差異。單擊Getcurvesfromselection，黑色塊上方的白色區域就是妳想要的形狀。
準備嵌入妳的字體。
假設妳已經多次重復了我剛才描述的方法，創建了壹些有用的圖標，並將字體文件保存為。現在，您可以在網頁中使用這個圖標庫了。
將SVG轉換成TTF
您應該采取的第壹步是將SVG字體格式轉換成壹種更熟悉、更通用的格式。對於本地安裝，TTF是壹種很好的格式。同時也為重新轉化為@font-face提供了良好的基礎。可以轉換字體的在線服務包括:
,
和
。然而，我個人最喜歡的是
因為我不會排隊，也沒見過它崩潰。
我覺得不用告訴妳這個資源怎麽用，就足以表示我的誠意了。引人註目的文件上傳字段，選擇元素和巨大的轉換按鈕會讓妳很快進入主題，真的。
編輯字體信息
既然您已經獲得了壹個TTF，我建議您現在編輯生成的元數據。重命名字體，添加屬性和描述，以便安裝、嵌入和分發。這也是宣告字體是為妳而生的壹種方式。運行Windows的讀者可以選擇使用看似霸氣的MicrosoftFontPropertiesEditor或者允許免費使用Typograf天。對於蘋果和Linux用戶，希望得到大家更好的意見。
重要:盡管MicrosoftFontProperties
編輯器允許妳添加作者、描述、權限信息，但好像並不能讓妳編輯字體名稱、postscript名稱等基礎數據。這些字段被禁用。如果妳想使用這些特殊功能，妳
在將SVG轉換為TTF之前，您需要編輯SVG代碼中的禁止值。在您最喜歡的文本編輯器(我使用Notepad++)中打開原始的SVG，並編輯以下內容:
FontName:您可以在標簽中找到font-family屬性。
PostscriptName:您可以在標簽中找到id屬性。
描述:妳應該添加壹個描述(作者，權限等)。)到這個標簽。請註意，這不同於TTF描述文本，在轉換過程中不會被保留；您還需要為TTF添加單獨的描述。
嵌入字體
壹旦在本地系統中安裝了TTF並預覽了它，就可以在FontSquirrel的@font-facegenerator中運行它。為了使輸出代碼盡可能高效和有效，下面是專家模式中值得壹提的幾個選項:
子集化:該選項允許您只運行所需的字符集(包括字符編碼、類型、語言和其他選項)以減小文件大小。
妳的圖標幾乎總是單獨出現，所以字距調整是不必要的。據說這樣也能減小文件大小。
WebOnly:如果您希望您的字體只在Web上使用，而不是在桌面上使用，您可以選擇此選項。也能更好的符合妳的授權計劃。現在我將介紹許可證。
發布字體
如果您對發布您的字體感興趣，向它添加壹個許可證是壹個很好的做法。不然很多字體網站都不會拿它來玩。既然我們在制作圖標時使用免費開源軟件，那麽在發布圖標時也不妨這樣做。
目前，有許多可用的授權選項，逐壹調查有時會令人費解。GNUGeneralPublicLicense是完全可以接受的，但是您可能要考慮SILOpenFontLicense。使用此許可證的主要優點是允許其他設計人員修改字體，但他們需要使用不同的名稱。在實際操作中，這意味著圖標設計中的壹些不良行為不能用“妳的名字”來進行。
有了這兩個許可證，妳還應該把版本信息保存在壹個文本文件中，並在字體的元信息中插入完整許可證的版權聲明和URL鏈接。如果您需要更具體的說明，請訪問各自的許可證頁面(上面的鏈接)。
CSSspriting的終結者
為什麽不再使用SVG字體作為通用圖標？有了制作圖標的能力，妳就有能力設計網站獨特的造型、品牌元素和裝飾。這就像CSS。
Sprities，所有這些視覺元素都可以保存在壹個文件中，減少了服務器調用http請求的次數；但是，圖標字體的元素可以調整大小，而不必依賴它。
在位置坐標(背景位置值)可以正確顯示。這使得它們更適合響應性設計。
讓我們假裝選擇壹種SVG字體，而不是我的蒸汽朋克博客中的壹些基本設計元素。組件設計的壹個簡單的HTML表格如下所示:
這種方法最大的優點是通用性。比如左起第二個齒輪形狀，可以設計成壹個微小的圓點，也可以設計成壹個巨大而抽象的背景裝飾。著色非常簡單
單身:顏色:栗色，但沒必要拘泥於平板色；多重CSS3效果可以增加質感和觸感。為了壹開始就啟發妳，看看這個sexclentgalleyofcss 3-enhanced web fonts。
屏幕閱讀器快速筆記
以這種方式使用字體顯示視覺元素的壹個問題是，當它在屏幕閱讀器上輸出時會受到影響。直觀上，網站訪問者會看到齒輪和箭頭等圖標，但屏幕閱讀器會堅持閱讀指定這些設計的字符。對於裝飾性SVG字體元素的使用，我建議聽聽Coyier的建議:為Unicode的SupplementaryPrivateUseArea分配矢量。讀者不應該閱讀這些符號。
協作iconweb字體
作為我的JavaScript導師，有壹天Rupert向我指出，使用SVG字體創建圖標集提供了壹個有趣的合作機會。妳看，SVG代碼——XML的壹種形式——是高度標準化的，易於閱讀。是源代碼的順序讓我覺得圖標字體的開發非常適合選擇GitHub這樣的協作編碼服務。
這個想法很符合我想要的象征意義:如果壹個圖標是很多人協商壹致確定的，那麽它的形成過程中也有壹定的“* * *知識”。它壹定是我們的圖標識別系統設計的最典型的圖標。我們要創造壹個屬於社群的圖標詞匯，對需要的人有意義。
為了發展這個想法，我創建了壹個開放的GitHub資源庫CommunityIconFont。這個庫的文件結構並不復雜:仔細閱讀Inkscape教程和項目主頁的內容應該可以解答妳所有的疑惑。如果妳是GitHub的新成員，試著閱讀他們的幫助頁面，或者詢問妳附近的技術人員(我就是這麽做的)。