iconfont.cn 阿裡出品的矢量圖示庫

Iconfont.cn

是阿裡巴巴推出的矢量圖示庫，其中涵蓋了1000多個常用圖示，并在持續更新中。（目前已有7000+圖示，部分圖示為使用者上傳，是以預設不公開，但是可以搜尋到。）

Iconfont提供以下功能：

• 線上圖示搜尋
• 圖示分撿下載下傳
• 線上儲存
• 矢量格式轉換
• 圖示庫管理

iconfont的優勢

• 自由變化大小（高清屏無壓力）
• 自由修改顔色（純色）
• 可以添加一些視覺效果如：陰影、旋轉、透明度

iconfont使用

網站

1. 聲明字型

@font-face {font-family: 'iconfont';

    src: url('iconfont.eot'); /* IE9*/

    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

    url('iconfont.woff') format('woff'), /* chrome、firefox */

    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */

}

​

1. 定義樣式

.iconfont{font-family:"iconfont";

font-size:16px;font-style:normal;}

1. 選擇圖示、擷取字型編碼，應用于頁面

<i class="iconfont">&#33</i>

Android應用

1. 下載下傳 demo代碼
2. 複制字型檔案到項目 assets 目錄
3. 打開 iconfont 目錄中的 demo.html，找到圖示相對應的 HTML 實體字元碼
4. 打開 res/values/strings.xml，添加 string 值

<string name="icons">&#x3605; &#x35ad; &#x35ae; &#x35af;</string>

1. 打開 activity_main.xml，添加 string 值到 TextView

<TextView

    android:id="@+id/like"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:text="@string/icons" />

1. 為 TextView 指定文字

import android.graphics.Typeface;

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    Typeface iconfont = Typeface.createFromAsset(getAssets(), "iconfont/iconfont.ttf");

    TextView textview = (TextView)findViewById(R.id.like);

    textview.setTypeface(iconfont);

iOS應用

2. 将字型檔案(.tff)添加到工程中
3. 打開Info.plist檔案，增加一個新的Array類型的鍵，鍵名設定為UIAppFonts（Fonts provided by application），增加字型的檔案名：iconfont.ttf

UILabel * label = [[UILabel alloc] initWithFrame:self.view.bounds];

UIFont *iconfont = [UIFont fontWithName:@"uxIconFont" size: 34];

label.font = iconfont;

label.text = @"\U00003439 \U000035ad \U000035ae \U000035af \U000035eb \U000035ec";

[self.view addSubview: label];

注意：

• 建立 UIFont 使用的是字型名，而不是檔案名
• 可以打開 demo.html 查找每個圖示所對應的 HTML 實體 Unicode 碼

iconfont制作

如果圖示庫裡沒有合适的圖示，你可以自行制作，然後将SVG檔案上傳到

iconfont.cn

。

• 下載下傳圖示制作模闆.AI
• 圖示制作規範