7、简单维护自己的图标库

一、前言：

开发新的个人项目常常受到缺少图标的困扰，今天就手把手教你如何打造专属自己的图标库。

二、建立图标库：

1、打开 iconfont
2、登陆 （没有账号可以注册一个）
3、点击图标库－－>选择图标库

4、点击选择任意图库，进入这个页面，在任意icon上悬浮鼠标

• 1.添加入库：就是把图标选中到临时的仓库

• 2.收藏 ：添加至收藏库中，可以通过下图找到

• 3.下载：以图片的形式下载（可以设置要下载图片的格式、大小、颜色）

5、打开临时收藏库 ，会出现下面三个功能选项

会出现下面三个功能选项：
- 1、添加至项目：将临时库添加到自己图标库中
- 2、下载素材：批量下载功能（同单个下载一样）
- 3、下载代码：稍后详细介绍功能

选择 添加至项目，新建一个demo的工程：

建立完成之后：

至此，建立个人的图标库工作已经完成。如何使用呢？

三、使用个人图标库：

1、从个人库中选择需要在项目中使用到的图标

2、选择批量加入购物车，选择需要的图标

3、选择下载代码

• 1、下载完成之后，解压得到

• 2、去除无用的部分（未画红色的部分），得到
  

4、在android中使用
- 1、将精简后的代码拷贝到assets目录下，

• 2、自定义IconFontTextView

public class IconFontTextView extends TextView {
    public IconFontTextView(Context context) {
        super(context);
        initIconFont(context);
    }


    public IconFontTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initIconFont(context);
    }

    public IconFontTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initIconFont(context);
    }

    private void initIconFont(Context context) {
        Typeface iconfont = Typeface.createFromAsset(context.getAssets(), "icon_font/iconfont.ttf");
        setTypeface(iconfont);
    }

}

• 3、复制 Values下面的strings 粘贴到当前文件夹 命名为 string-icon-font
  

• 4、打开 demo_unicode.html这文件，将画红线的值拷进去。

• 5、在XML文件中引用

<com.wd.fmm.leisure.view.IconFontTextView
                android:textSize="@dimen/activity_homepage_buttom_icon_size"
                android:gravity="center"
                android:text="@string/icon_font_home"
                android:textColor="@color/colorAccent"
                android:layout_width="30dp"
                android:layout_height="30dp" />
            <TextView
                android:textColor="@color/colorAccent"
                android:text="首页"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

完整布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/fl_root"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>
    <include layout="@layout/incloud_divice_line"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="52dp">
        <LinearLayout
            android:gravity="center"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <com.wd.fmm.leisure.view.IconFontTextView
                android:textSize="@dimen/activity_homepage_buttom_icon_size"
                android:gravity="center"
                android:text="@string/icon_font_home"
                android:textColor="@color/colorAccent"
                android:layout_width="30dp"
                android:layout_height="30dp" />
            <TextView
                android:textColor="@color/colorAccent"
                android:text="@string/homepage_home"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

        <LinearLayout
            android:gravity="center"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <com.wd.fmm.leisure.view.IconFontTextView
                android:textSize="@dimen/activity_homepage_buttom_icon_size"
                android:gravity="center"
                android:text="@string/icon_font_hot"
                android:layout_width="30dp"
                android:layout_height="30dp" />
            <TextView
                android:text="@string/homepage_hot"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <com.wd.fmm.leisure.view.IconFontTextView
                android:textSize="@dimen/activity_homepage_buttom_icon_size"
                android:gravity="center"
                android:text="@string/icon_font_my"
                android:layout_width="30dp"
                android:layout_height="30dp" />
            <TextView
                android:text="@string/homepage_me"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        <LinearLayout
            android:gravity="center"
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent">
            <com.wd.fmm.leisure.view.IconFontTextView
                android:textSize="@dimen/activity_homepage_buttom_icon_size"
                android:gravity="center"
                android:text="@string/icon_font_settings"
                android:layout_width="30dp"
                android:layout_height="30dp" />
            <TextView
                android:text="@string/homepage_setting"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

四、效果图：