標籤：

阿里巴巴iconfont怎麼是正確的使用方式？

01-23

自己畫的svg想用font的類型引入到網頁中，是不是要用iconfont上傳生成代碼，然後使用？求大神解答

圖標的製作和上傳可以參照官網給出的文檔：Page 1

圖標的下載和使用官網上說的不是很清楚，簡單介紹下：

1.首先在Iconfont-阿里巴巴矢量圖標庫上面將你需要的圖標點擊購物車按鈕加入「暫存架」

2.選擇完所有要用的圖標後「存儲為項目」，給它命名。然後在「圖標管理」-「圖標應用項目」中找到這個項目，獲取在線鏈接，把裡面的代碼複製到CSS中。

3.在HTML中需要使用到圖標時，使用iconfont類名。

&

裡面寫上你想用的圖標下面的Unicode：

4.然後你可以通過控制iconfont類的屬性改變圖標的樣式，比如：

.iconfont{
font-family:"iconfont";
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
padding-left:20px
}

就可以在頁面中引用和修改了。

官網中還列出了使用時候的兼容性問題及其解決方法：Page 2這些圖標也可以下載到本地使用。圖標都加入暫存架後選擇「下載到本地」，會得到以下幾個文件：

瀏覽器打開demo.html可以看到每個圖標的Unicode，把iconfont.css里的代碼複製到css裡面，把下面四個文件放到css可以引用到的文件夾里就可以了。下載使用的一個缺點是添加圖標的話要重新把所有圖標再下載一遍覆蓋原來的文件，如果是在線鏈接只要重新生成一次鏈接就好了。

自從有了阿里巴巴字體圖標庫 設計小伙兒都變懶了

&

@font-face {

font-family: "iconfont";

src: url("//http://at.alicdn.com/t/font_1469410270_4028482.eot"); /* IE9*/

src: url("//http://at.alicdn.com/t/font_1469410270_4028482.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */

url("//http://at.alicdn.com/t/font_1469410270_4028482.woff") format("woff"), /* chrome、firefox */

url("//http://at.alicdn.com/t/font_1469410270_4028482.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url("//http://at.alicdn.com/t/font_1469410270_4028482.svg#iconfont") format("svg"); /* iOS 4.1- */

}

.iconfont{

font-family:"iconfont";

font-size:16px;

font-style:normal;

}

.icon-tel:before{

content: "e601";

}

&

&

&

&

&

  • &

    &
  • #xe600;&

    &

    &

    &

    我在百度經驗有寫過一篇使用方法

    http://jingyan.baidu.com/article/14bd256e4bd36bbb6c26126e.html#5827690-tsina-1-80491-fe183374908e783f9dbfe7dcb7ed2bb5

    iOS開發 iconfont代碼自動生成工具 https://github.com/panghaijiao/iftoc

    字體圖標在線鏈接怎麼使用呀？？？

    樓主的問題 有語病吧

    請教，為什麼我測試的這些圖片原本是彩色的，瀏覽器中顯得卻都是黑色的呢

    icomoon.

    要使用新的symbol引用方式

    求助：自己做的icon 總是提示too large 怎麼解決？

    那阿里的矢量圖標庫上面的圖標能商用的嗎？

    目前還缺少類似fontello那樣的批量導入功能..只能保存到固定的項目中

    自己設計的圖標的話，上傳之後就可以直接使用了嗎？還是需要審核？

    想問下 這個可以用顏色漸變嗎。。。

    rem布局的格式用矢量圖的話,會飛起來的!

    ------------------------------------------------------------------

    已經解決了.將body的font-size:16;

    按照你的這個需求，自己畫的svg，icomoon或者fontello應該是你需要的。

    fontello使用更方便，但是生成出來的icon很多時候不會自動居中，所以還是建議icomoon。

    緩存問題怎麼處理

    怎麼使用http://iconfont.cn的字體圖標

    阿里媽媽webfont裡面的字體好少，怎麼能添加字體呢？

    iconfont 可以動嗎 ? loading 圖

    為什麼我使用的線上字體圖標在別的電腦上顯示不出來啊

    為什麼我做的圖標生成項目圖標以後是這個樣子那？ 求解

    推薦閱讀：

    • ※關於valueOf執行順序問題?
    ※谷歌地圖的顯示方式是如何做到的？
    ※Facebook 首頁都使用了哪些技術提高訪問速度？
    ※怎麼讓input元素的顯示值和value值不一樣？

    TAG:前端開發 | 圖標 | IconFont |