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


作者：张国军_Suger

开发工具与关键技术：Win10、项目、图标

        对于编程人员来说，有一个不可获取的图库就是阿里图标库，这个图标库可以帮助我们把很多图标编译成文件，这样就可有方便我们调用。不需要繁杂的操作，只需按照步骤来就会变得轻而易举了，希望对朋友们有所帮助。

        下面分为几个步骤介绍。

步骤一：

        首先我们需要进入阿里图标库官网，然后我们需要先登录，点击右上角的☞登录图标☜即会弹出登录窗体。



步骤二：

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



步骤三：

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



步骤四：

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



步骤五：

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



步骤六：

        在这里添加图标到项目有两种方式：

                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标签的类里面就可以了，否则就会不显示图标。



这样添加图标到项目的第二种方式的使用也一起完成啦。
如有问题欢迎留言，谢谢。

      
     11月 25, 07    by    watsonxu

       Iconfinder:Icon图标搜索下载服务网站


  Iconfinder是一个提供Icon图标搜索下载服务网站。Iconfinder主要提供12 x 12, 16 x 16, 22 x 22, 32 x 32, 48 x 48, 64 x 64 和 128 x 128尺寸的Icon图标的搜索和下载。所有的提供搜索的图片都是PNG格式。 
上面是 Iconfinder搜索结果页面，所有的搜索结果 图表上方都有三个链接选项，一是Tag，你可以点击其查看现有的Tag，或者增加自己觉得更合适的Tag，第二个链接选项是下载，第三个选项是 License查看，你可以查看其分享权限，并且可以查看此Icon图标作者的相关信息。此外在右上方提供了搜索结果过滤选项功能，一是大小过滤功能，你 可以选择显示某一大小的Icon图表，而是背景色选项，你可以选择白色或是黑色Icon图表背景色。
如果你有不错的Icon图标作品，你可以通过将相应的图表发送至此Email地址：martin.leblanc1@gmail.com，附上你的设计说明以及分享权限。你可以通过此链接订阅 Iconfinder上面最新提供的图标。

 转自【http://blog.watsonxu.com/2007/11/iconfinder.html】

前期准备一张ico图标，以下操作均为windows下进行

1、下载goversioninfo，地址https://github.com/josephspurrier/goversioninfo

go get https://github.com/josephspurrier/goversioninfo


2、下载完成后进入%GOPATH%/src/vendor/github.com/josephspurrier/goversioninfo/cmd编译生成可执行文件

go build -o %GOPATH%\bin\goversioninfo.exe main.go


3、在环境变量PATH中添加%GOPATH%\bin

4、复制versioninfo.json到自己的项目目录下，在testdata\example32和testdata\example36目录下有，随便复制一个，并将其中StringFileInfo下的参数修改为自己实际参数，设置IconPath为ico名称，例如

"IconPath": "demo.ico", //ico、main.go、配置文件都在同级目录中


5、在自己项目的main.go文件顶部增加备注行//go:generate goversioninfo -icon=demo.ico，其中icon文件请修改为自己的文件名称

6、goversioninfo文档介绍说，执行go generate即可，实际使用发现一直报错，后直接执行generate成功生成resource.syso

7、最后执行go build执行编译即可，右键查看属性吧


个人博客： 西柚叨叨的个人博客

上星期在开发中，因为需要的天气接口没有付图标，需要自己根据天气信息画对应的图标，我本来就有点倾向全栈，所嘛。。。
这个就打算自己花店时间制作了，于是下了一张png开始仿照风格自己PS绘制，同样也预留了2份PSD给大家，方便在后期开发需
要修改图标风格的时候，可以继续修改，非常的方便，废话不说，先上图，再附上使用方法，最后附上下载地址，和 git 地址，
欢迎大家下载和点赞！


绝对是无私奉献。。。


PSD资源图：




矢量切图资源：




白色透明风格资源效果：




关于PSD矢量不会使用的，可以关注我的微博，用微博给我发私信，或者CSDN留言，拒绝CSDN私信，CSDN私信一概不回！谢谢大家！
下面奉上下载地址：






Github:https://github.com/Mr-Jiang/-PSD-.git
如果您觉得我的资源不错，可以给我点赞！后期有好的资源继续为大家献上！欢迎关注和留意我的新浪微博，即时为大家更新更好的资源谢谢！




关注新浪微博：web端：http://weibo.com/3234181164/profile?topnav=1&wvr=6&is_all=1#_rnd1441527090858
手机端：http://m.weibo.cn/u/3234181164?
我的公众号目前正在开发中！待上线后，实时推送一手资源及博客！以及招聘求职、游玩组团等强大功能！届时欢迎大家捧场关注！
CSDN下载地址：http://download.csdn.net/detail/jspping/9488776
谢谢观看！