IcoMoon!一個可以通過個性化設置來創建自定義圖標(字體)的生成器!也可以將SVG圖片,轉換成web字體
IcoMoon是一項免費的服務,通過使用不同設置使我們能夠創建自定義的ICON圖或ICON字體。
當然了,網站也有資源打包下載!
包括大多數流行的免費圖標集(在its library裏搜索),您可以挑選其中任何一個自己鐘意的圖標下載。
同時,它會提供兩種下載方式:圖片版和字體版!
圖片版是經過CSS Sprites技術處理的PNG格式,字體版有多種格式供我們選擇(EOT,SVG,WOFF,TTF)。
此外,除了其他設計師們設計的圖標,IcoMoon也有自己免費的海量圖標集,它們都非常贊。
網站地址: http://icomoon.io/app/
使用方式:
1.選擇圖標
2.下載字體庫,copy樣式
3.在項目中使用
@font-face { font-family: 'icomoon'; src: url('../myfonts/icomoon.eot'); src: url('../myfonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../myfonts/icomoon.woff') format('woff'), url('../myfonts/icomoon.ttf') format('truetype'), url('../myfonts/icomoon.svg#shejidaren') format('svg'); font-weight: normal; font-style: normal; } .icon-qq:before { content: "\e900"; } .icon-qq { font-family: icomoon; color: gray; width: 30px; height: 30px; line-height: 28px; text-align: center; font-size: 20px; display: inline-block; border: 1px solid gray; border-radius: 50%; transition: transform ease 0.2s; } .icon-qq:hover { color: red; border: 1px solid red; cursor: pointer; transform: scale(1.1); }
<span data-icon="qq" class="icon-qq"></span>