如何将自己设计的图标或通过网上下载的图标上传到阿里图标图库中使用方法教程

        对于编程人员来说，有一个不可获取的图库就是阿里图标库，这个图标库可以帮助我们把很多图标编译成文件，这样就可有方便我们调用。不需要繁杂的操作，只需按照步骤来就会变得轻而易举了，希望对朋友们有所帮助。
        下面分为几个步骤介绍。
步骤一：
        首先我们需要进入阿里图标库官网，然后我们需要先登录，点击右上角的☞登录图标☜即会弹出登录窗体。

步骤二：
        弹出登录窗体后，选择快捷登录方式(我这里选择新浪微博账号登录)，即可跳转相应的登录界面。

步骤三：
        输入您需要登录的账号密码，点击登录即可进行登录。

步骤四：
        点击☞图标管理☜下面的☞我的项目☜，进入我的项目。

步骤五：
        如果没有项目可以先点击右边的☞+号图标☜进行新建(由于本人已经有项目的，因此本人就不新建了)。

步骤六：
        在这里添加图标到项目有两种方式：
                1、拖拽上传或点击上传。
                2、加购物车添加如项目。
1、拖拽上传或点击上传。
步骤1.1：
        如果已经有自己的图标可以直接点击上传图标至项目，即可跳转到上传界面进行上传。

步骤1.2：
        打开您要上传的图标文件，选中拖拽到当前界面进行上传，或者直接点击上传找到需要上传的文件进行上传操作。

步骤1.3：
        这里显示您想要修改的信息(本人默认不进行修改)，最后可以选择去色上传或者保留颜色上传(看您的需要而定)。

步骤1.4：
        这里即为刚才上传的图标。最好点击一次☞查看在线链接☜进行更新icon代码。

步骤1.5：
        点击下面的红色字体进行更新代码。

步骤1.6：
        更新完成后即可点击☞下载至本地☜按钮进行下载文件。

步骤1.7：
        直接下载

步骤1.8：
        下载完成后进行解压，解压完成后，打开到最里面的文件Ctrl A 全选，然后Ctrl C复制，复制到您的项目的下。

步骤1.9：
        打开您的项目，把刚才复制的文件复制到iconfont目录下，直接选中当前文件夹Ctrl V就可以了。

步骤1.10：
        然后这里选中这几个字体和图标文件，按住Ctrl 键再进行多选就可以了，选完后Ctrl C复制，复制到您的项目的下。

步骤1.11：
        打开您的项目，把刚才复制的文件复制到fonts目录下，直接选中当前文件夹Ctrl V就可以了。

步骤1.12：
        回到刚才的阿里图标库管理鼠标悬浮到您刚才上传的图标上方，这里会显示几个功能操作，我们需要的就是复制代码，直接点击☞复制代码☜即可。

步骤1.13：
        粘贴到您需要显示图标的界面即可。

步骤1.14：
        上面其实还有一步，那就是需要我们打开☞iconfont☜下面的☞iconfont.css☜文件来查看他的家族是哪一个。Ctrl C复制他的家族名字。

步骤1.15：
        打开刚才的文件，把刚才复制的家族名字复制到这个i标签的类里面就可以了，否则就会不显示图标。

        这样添加图标到项目的第一种方式的使用就完成啦，其实一种方式就够了。

  下面来介绍第二种方式：
2、加购物车添加如项目。
步骤2.1：
        首先我们需要找到我们需要的图标，这里可以通过官方图标库来查找(点击状态栏☞图标库☜下面的☞官方图标库☜进入)，也可以通过下方☞搜索框☜进行搜索。

步骤2.2：
        我这里就以日期为例，直接在搜索框中搜索日期敲回车即可搜索。

步骤2.3：
        进入到搜索结果界面后，找到我们要的图标，然后在我们需要的图标上方悬浮会出现三个图标(加入购物车、收藏、下载)，这里我们选择加入购物车。

步骤2.4：
        加入购物车后我们可以点击右上角的☞购物车图标☜查看购物车的图标。

步骤2.5：
        点击☞购物车图标☜后，这里会显示我们加入购物车的图标列表信息，在这里会显示两个选项，☞添加至项目☜和☞下载素材☜，这里我们选择☞添加至项目☜。

步骤2.6：
        点击☞添加至项目☜选项后，会让你选择加入的项目，这里选择我们☞已有的项目☜里面，如果没有可以点击右面的☞+号☜添加项目，然后点击☞确定☜按钮即可添加入项目。

步骤2.7：
        从这里开始其实和第一种方式一样的操作了，不过还是说一下吧，怕有些朋友忘记了。
这里即为刚才从购物车添加到项目的图标。最好点击一次☞查看在线链接☜进行更新icon代码。

步骤2.8：
        点击下面的红色字体进行更新代码。

步骤2.9：
        更新完成后即可点击☞下载至本地☜按钮进行下载文件。

步骤2.10：
        直接下载

步骤2.11：
        下载完成后进行解压，解压完成后，打开到最里面的文件Ctrl A 全选，然后Ctrl C复制，复制到您的项目的下。

步骤2.12：
        打开您的项目，把刚才复制的文件复制到iconfont目录下，直接选中当前文件夹Ctrl V就可以了。

步骤2.13：
        然后这里选中这几个字体和图标文件，按住Ctrl 键再进行多选就可以了，选完后Ctrl C复制，复制到您的项目的下。

步骤2.14：
        打开您的项目，把刚才复制的文件复制到fonts目录下，直接选中当前文件夹Ctrl V就可以了。

步骤2.15：
        回到刚才的阿里图标库管理鼠标悬浮到您刚才上传的图标上方，这里会显示几个功能操作，我们需要的就是复制代码，直接点击☞复制代码☜即可。

步骤2.16：
        粘贴到您需要显示图标的界面即可。

步骤2.17：
        上面其实还有一步，那就是需要我们打开☞iconfont☜下面的☞iconfont.css☜文件来查看他的家族是哪一个。Ctrl C复制他的家族名字。

步骤2.18：
        打开刚才的文件，把刚才复制的家族名字复制到这个i标签的类里面就可以了，否则就会不显示图标。

这样添加图标到项目的第二种方式的使用也一起完成啦。

如有问题欢迎留言，谢谢。