00:01
接下来呢,我们处理自己图标资源。这图标的话呢,在开发中啊,还是比较常见的。你像我这个文档,我这里就用上了一些字体图标。对吧,那么项目开发中的自图标呢,我们可以去阿里巴巴的矢量图标库,在这里面下载。我们把它下载下来之后,然后把它引入到项目中,这样呢我们就可以在项目中使用它了。一起看吧。首先啊,拿到阿里巴巴矢量图标库,大家呢,需要注册一个账号啊,那么我这里呢,就登录一下。大家要做的就是注册一个账号,注册过程我们就不演示了,好注册完之后呢,我们在这个素材库这里啊,有个官方的图标库,诶,我比较喜欢用这个。当然了,除了官方投标库呢,还有一些呃,更多的其他图标库,大家可以自己自行选用啊,我们找到官方投标这个官方图标库呢,你随便挑一个你觉得比较好看的啊,去用就好了。
01:01
那比方说我就挑这个了,呃,淘票票的,我这里呢,随便添加几个OK。我们呢,选择点击这个将它添加入库,那么在这个购物车这里呢,我们就能看到我们这添加的四个图标,接下来呢,我们把它添加到项目中。那么在这里我们可以添加一个项目,比如pack。啊,我OK。好,然后点击确定,那么我们就可以把它添加上去了。贴上去之后呢,这里就有四个小图标,那么我们点击这个下载到本地,就会在本地使用它了,点击下载。OK。下载完成之后呢,我们在文件中去查看这个东西。往下走复制啊,那么这样呢,我们就下载好了一个图标,我们把它解压一下啊。
02:06
解压完成之后呢,我们点开自己图标文件,那么在这个文件夹里面呢,有个DEMO感文件啊,有个这样的文件,那么这个文件呢,它会。呃,显示咱们的字图标的这三种用法,UN code的用法,Class用法和symbol用法,它们的区别就在于呢,UN codede呢,它的兼容性会比较好。健身最好,其实在过去呢,它这里显示的是IE6啊能够用,那么这个呢是IE8以上,Symbol呢是IE9以上,就是他们的兼容性的一个区别。那么通常情况下呢,还有一种区别就是从用法上来讲啊,Symbol这个phone class用法呢,会比较简单一点。所以因为又考虑到IE8浏览器,又考虑到这个用法简单,所以我们通常啊会使用photo这种用法会简单会更多一点。所以我们就以这个plus为例去做啊。
03:01
那么photohouse用法呢,只需要引入一个CS文件,然后呢,写在HL里面,写个图标,写上一个标签,标签里面的必须有两个类名,第一个类名是固定的,叫unconfor,第二类名呢,就是上面这个类名,比如说我想用这个爱心,就得写icon干爱心就就照着这单词写就好了,然后呢,什么编辑,然后什么第一眼镜,还有这个菜彩蛋啊等等。好了,那么我们接下来就来用一用吧。首先呢,我们需要把这个icon呢,复制到咱们项目中来。来一进来一进来之后呢,要注意啊,就是iPhone呢,它这里使用了三个图标文件,字体文件啊,字体文件我们也得整进来,那么我整到这个phone目录去。好呃,那么就是下面这三个啊,Ttf和这个wolf这个文件OK,整进了整进来之后呢,这个就不需要了,我们打开。
04:06
那么这里要注意的就是我们这个字体文件的目录呢,和C文件目录不是同一级目录,所以这里我需要把路径改造一下。OK,把这三个目录也改造一下,因为字体文件的目录得是对的啊。好了,那么我们最后呢,就是要想打包成功啊,还要记得这个ione d CS需要引入才能生效,千万不要忘了,那我在上面印吧。当然在下面也是OK的。好了引入才会打包好,此时其实我们并不需要做任何配置,打包的时候它就会有效果。诶宝宝们来看啊,打包的时候呢,诶就有三个字体文件就打包过去了啊对吧?好C文件呢,会打包到JS里面,所以C文件是看不见的。
05:02
但是同样的,我们希望打包的时候,它这个输出的目录啊,不要给我输到这,给我输出到static里面的一个文件夹里面去,所以这时候我们就需要对它做配置。那么配置的话呢,我们配置其实和上面这个配置是类似的。好,只是呢,我们针对的文件呢,是这个ttf对吧,那什么wolf那二呢,有可能有有可能没有。这是他这些文件,那么我们用的不是access,而access呢,它是会小于某个大小的,这个文件呢,会转换成贝四,而咱们字体文件是不需要转的啊,所以它上面有一个叫resource。这种方式,这种方式呢,相当于过去的file loader,也就是说它只会对文件原封不动的输出,它不会被转换成BASE4的格式,所以我们用这种形式,也说上面这种形式呢啊,它会走贝,会转贝斯64啊,下面这种形式不会。
06:02
那么既然不会的话,那这个他转杯44的配置就不需要配置了。然后在这里我们只要改变这个输出的名称就可以了。所以说名称呢,我们输出到一个media里面啊,我就不输出到,呃,什么缝了,我就叫media。OK,那么这样呢,我们就把这个处理好了,我们再次打包一下。OK,再次打包呢?你会发现字体文件没了,多了个木匠meium,那么它进了mediaium,同时哈希值只取十位,所以它长度也是十。OK,那么现在呢,我们如果打开页面的话呢,当然他看不到这个图标啊,因为我们目前还没用上这图标。刷新一下。呃,对了啊,这个要查看的话呢,我们这个路径要改一下。它是第em目录下面的static,下面的je,再下面的many,这个路径我们也需要改一下。
07:00
OK,然后C图标并没有显示啊,因为我们还没有整次图标,那么整次图标的话呢,我们可以写个SPA。Class,第一个类名呢,必须要加icons,第二个类名就是按照我们前面的要求去写,比如爱心。还有什么编辑?当然了,如果你怕写错单词,最好是去复制找到之前的iPhone这个DEMO。对吧,我们去复制。好,还有这个3D眼镜,然后再看最后一个啊,最后一个叫彩蛋。这样去复制。好,那么这样呢,我的图标就能生成了,我们一起来看效果,你看在这个这里就看到这个图标了,将来你想要图标去哪里呢?你就把它放在先的位置,调整样式,它就能达到你预期的效果。好了,那么这里呢,就是处理这个字体图标的这个资源。那么这里要注意的就是它用的是access,这resource,我们千万不要把这个图标也转贝四了,这样会行不通啊。
我来说两句