尚硅谷前端基础 (79)

好，那么提到我们的图标字体库的话，我们也不得不要说一个我们这个国内的一个图标字体库的一个平台是吧，就是一个字体库啊，就是一个ICO font是吧？Icon font，那这个呢，是阿里的一个这个图标库的平台，它里边的图标有很多啊，有很多，那跟那个放在awesome相比的话，那其实放在awesome这个库就就太小了是吧，它你看它1000多个，你阿里的动不动，你看这这这这个十百千万十万百万就600多万个，对吧，所以它里边的图标会比较多一点啊，然后这个放awesome的话，还是呃，它有免费的图标，有收费的图标，免费图标你像我们这都是免费图标，但是你会发现很多图标都丑的要死，它那都特别粗是吧，特别粗，现在我们可能都喜欢一些线条比较细的图标，但是它这些免费的还都是一些比较粗线条了，所以也并不是那么的好看啊，也并不是那么好看，而我们这个阿里的这个图标的话，相对来说都比。

打得漂亮，因为很多都是用户上传的嘛，量也比较大，然后你可选择的范围也比较多，然后也比较的呃，比较好看，所以它用起来其实更加的灵活，让我们可选择的也也更多一些啊，更多一些，但是它也会存在一些问题，就是放的awesomethem的话，它有一个文档对吧，你用的时候你根据需要直接用就完了，而我们这阿里这玩意儿呢，它自一堆给你列一块了，列一块的话，你用的时候你得上里边上这个网站呀，自己去把你需要用的那个东西给它挑出来，哎，挑出来然后再下载打包，然后再去使用，所以下载的时候会比较麻烦一点。二一个呢，它里边的东西我感觉有一些东西的版权不是很清晰，也也就是说这东西到底有没有这个有没有这个license是吧，这个许可让你去用，嗯，我感觉它不是很清晰，所以这个东西我们在练习的时候随便用，爱用不用无所谓，但是如果说你到了公司，你给你公司做项目啊，涉及到商用的东西。

了，呃，最好呢，联系一下这个作者是吧，确定一下这个版权的问题，不要因为这点东西出问题，像这个放到奥就是你该花钱花钱不花钱就免费的，版权问题很清晰，但是阿里的一些图标很多都是这个用户上传的，上用户上传的就意味着版权问题不是很清晰，所以啊强调一下，你在商用的时候，在你的公司的企业网站去用的时候，一定要确定跟这个原作者能沟通一下，确认一下这个版权没有版权问题，或者说诶可以花钱去买的时候你再去用，千万不要说直接去用，风险很高，所以很多像大公司啊，一般都是自己去指定，自己去制作国标字体，很少说我去用公共的库啊，都会自己制作，避免这个版权问题啊。好，那我们来看一下它怎么用。那你要用这个的话，爱森恩放第一件事，你得先登录一下，他必须得登录，登录的话你可以用你的微博账号，还有什么阿里云账号去登录啊，很奇葩，用微博账号是吧，那你自己去用你的账号登录一下，这我就不再多说了，我这已经登录好了，我就不演示了，然后的话，他这个图标库的话，你可以去选它有一个官方图标库吧。

有点慢对吧，然后在里边你就可以选它会有一堆的图标，你根据你的需要选择你想要的那个就行了啊，想要那个就行了，比如说诶比如是有一个淘宝新选官方垃圾分类标识，你点开这里边显示的都是一些这种诶垃圾分类的是吧？怎么用？诶比如说我想用这个，诶怎么办呢？它是不是一个购物车的图标啊，诶你你当然你可以选择这个下载，选择下载的话，在这里边它就会给你选择是吧，你可以选颜色，哎，你可以保存成图片，保存成那个AI，改存成SVVG都可以，但是如果你是这样的话，就跟我们那个，跟我们那个那个那个那个图标字体就没有关系了，所以我们如果是用图标字体的话，方式不是这么用的。然后还有一点，我们要说一下你看啊，它这些图标，其实你要看的话，我看这它有很多这种彩色的图标，还有一点你要注意，如果你要用的是彩色的图标，就不要用涂自己了。

图标字体一定都是单色的，那像这种的话，你只能用图片了啊，只能用图片了，所以在这儿你可以直接把它保存为图片，就当成一个图片用也是没有问题的，包括大小，包括什么你都可以去调，对吧，都可以调，但是如果你用图片的话，跟图标自体没关系了，这你就自己开发了，我就我就不管你了啊，我们就说怎么把它作为图标自己使用，那在这里边你直接选中，比如说你想用这个加购物车啊，你想用这个我找一个吧，有害垃圾加购物车，可回收物加购物车，诶湿垃圾加购物车，干垃圾加购物车，那现在其他垃圾也加购物车，那现在我等于我在我的这个里边就加了这么六个加到购物车里了，那怎么用呢？找到你的购物车，现在我是不是加了这么六个图标啊，诶六个图标那注意了，我们的这个阿里的艾森放呢，它是以这个项目为单位的啊，项目为单位的，所以你加入完购物车以后，你还要把这些图标添加到项目里啊，怎么添加直接点。

一添加，呃，我这已经有了一个项目叫艾特硅谷，那你我们区分一下，我可以再建一个新项目，比如说我叫艾特硅谷，艾特硅谷二，诶加入这个新项目，然后直接点击确定，那这个时候还是添加项目。哎哟。我看一下啊，它这个挺奇怪的，我们再选一下啊，其他的哎，这这个。这个，然后点我们这添加至项目。回去啊，还得回去啊，我这又等于又建了一个啊，我把这个给他待会儿再删吧，啊待会再删，那这个时候我就直接选中你要加那个项目啊，注意你点完这个以后，你添你要点这个返回是吧，不然就创建不出来，然后呢，选择你要添加项目，直接一点确定，那现在这堆图标就已经等于是给你添加至这个项目里了，你就可以去。

还得维护一下，因为我这个项目应该是创建重复了，那你们用的时候注意一下，它有一些地方用的时候你还需要注意一下这个细节啊。找一下我们个人的一个设置里面应该有。项目信息项目信息。哎呀，他这个好烦人。嗯，我需要找一下他的那个项目的那个链接，我们来看一下在哪呢？设置里边有没有啊。

图标库哦，在这图标管理这有一个我的项目，因为我这块应该是诶啊他已经给我加进去了是吧，我把这个重名的我给他删掉，嗯，删一个项目项目管理。删除项我们只留一个啊，只留一个，我把这也删了啊，把这也删了，重我们重新演示一下，因为它这个有的地方不是那么显示，那么那什么清晰删了，然后还是购物车里面现在有六个图标，我们点一个添加至项目，那我们这里边现在我就有一个项目，对吧，我现在要创建一个新项目，我这叫做一个艾特硅谷，艾特硅谷艾特歌威硅歌舞谷二，然后点击这个确定啊，确定完了以后呢，我们现在再看这有没有啊，刷新一下。爱的硅谷二诶图标是不是就已经加进来了，哎，加进来了很很奇怪是吧，购物车没给我清空啊，没给我清空，我我我自己手动清一下吧，那现在等于我这几个图标就已经加到了我艾特硅谷二的这个项目下啊，加到下边了，加到下边怎么用啊怎么用，我们这儿有一个啊链有一个东西叫做下载至本地啊，下载至本地它这是不是还有在线的用啊，在线还没法用，我们点一个下载至本地，直接一点它就会出现这么一个下载的包，对吧，它会自动下载，下载完了以后我直接右键我提取到我的桌面上。

提到我的桌面上，提到桌面以后，我得到是这样一个文件夹，你打开的话，它里面结构也比较简单，你看这这是不是有一个DEMO引的假毛啊，哎，这里边放的就是一些案例，怎么用啊，会给你案例是吧，怎么去使用啊，怎么去使用说明书，然后的话，我们要用的话，我们直接来说在这儿啊，我们直接创建一个新的文件。新的文件我们来一个零四，这个是我们这个阿里的一个这个字体库结构写上，那还是我们得需要去导入啊，导入的话，我在这儿直接新建一个文件夹，我们就叫一个icon一个放啊新建一个文件夹，呃，建完了这个文件夹呢，我们来在这儿呢，这这这什么玩意儿，我它关掉啊，建完这个文件夹，我们需要把一些文件给它放进来，有哪些文件呢？我们来看一下，呃，其实主要就是这么几个啊，就是除了它，除了它你都可以粘过来，你就干脆一不到二不休，你把它都拖过来，都拖过来，然后把这玩意儿给他删了。

除了它都可以不用啊，除了它都可以不用，那现在我们是把我们刚才下载的文件都已经粘过来了，粘过来以后这这这这这这demo.cs也可以不要啊，你给它删掉删掉删掉完了以后，你注意这堆文件里有一个文件叫做一个icon fo.css你要做的事也是引入这个文件，直接来一个link，我们直接是一个点鞋盖下的icon fo这边，这个icon fo.css直接引入这个文件，这就引入它就跟引入我们那个放的awesome里面那个o.CSS是一样的，我就不多说了，我也不写了啊，你就记住了，跟那个方式其实是一样的，大同小异，剩下的用法就简单了，你想用什么，比如说我想用这个纸箱回收，那怎么办呢？直接写呗，我们直接来一个这个也来一个I标签，注意这个时候它的class就叫做icon放了啊，爱放了，你想用纸箱回收怎么办？

看他是不是给你码了CTRLCCTRLV粘过来，然后我们给它运行一下。是不是就有了小点是吧，小点我们给它调大点啊，Style标签，Style标签我们来一个这个I设置一个found size size呢我们来一个这个100像素啊，100大一点。

哎方啊，他他这里边给我强制设置一个大小了，我们给他加一个设置，是不是这个呢，是它的这个优先级的问题，因为我这里边icon放的这个类，它是不是肯定也设置大小了，你设置大小，我这通过元素选择器没法覆盖了，所以我这呢，我可以给它来一个那个连着写一个点儿一个艾滋放，这样就应该能生效了，对吧，就生效了啊，那这样我们这个纸箱回收是不是就用上了，你说我再用别的一样的，也是我复制几个啊，复制几个用别的干垃哎湿垃圾粘过来，把这个尸体给粘过来就行。这儿还有一个干垃圾尸体粘过来起火啊，很简单。然后再看是不是就都用上了，哎，就都能使用了啊，这是第一种方式，我们通过实体，所以其实它跟那个跟那个那个found awesome的区别，主要就是第一个它得自己去挑去啊，自己挑去，第二一个它的类名叫做icon found，它不叫那个别的名是吧，叫icon found，然后的话还有一个就是我们说的这个我们还可以通过什么呀，是不是还以通过这个类的形式去使用啊类我看啊是不是有放glass呀，类你看这叫什么？哎，这就简单了，叫纸箱回收，这叫湿垃圾是吧，所以你要用类也简单，直接写来一个爱标签，爱标签我们直接来一个class class我们来一个icon fo fo，然后这个class我们叫什么呢？有一个什么呀，有一个叫做干垃，其他垃圾，那你就直接来什么呢？来一个这个icon icon杠其他垃圾。

是不是就出来了，哎，你用用类也是一样的啊，用这个类也是一样的，然后呢，我们用我们的这个伪元素也可以啊，我们直接来一个这个P标签，P标签我们来一个hello hello的话，尾元素其实也一样啊，我们直接来一个这个P冒号，冒号一个这个before before的话，我们这个content的里面是不是得写这个编码，编码得看一眼了，编码的话我们看这，呃，比如说有害垃圾编码是不是一个这个E625啊CTRLC粘过来，这是一个斜杠E625E625，大家道这是反反斜杠啊，反斜杠E625165，当然我们还得需要设置一个found family found family就叫icon fund，所以它用起来比那个还要简单一些，然后大小你也可以设置一下found size，方size，比如说我来一个100像素啊，设置大一点，用伪类也可以是吧，用这个伪元素也可以。

只不过你就记住这编码是什么，这码其实就是这个X后边这个，这就是它的一个编码啊，你用哪个把这编码给它粘过去就行啊，粘过去就行，用法都是类似的啊，用哪个都行，所以你要做的就是其实把这东西熟悉一下，没什么难的，它没有什么动脑的地方，都是固定不变的，你把这个规则掌握好了，这就能用了啊，其他以后你再遇到其他的一些这个图标字体库使用方法也是都一样，我们在这儿就不再赘述了啊好，关于图标字体我们就给他说完了啊，把这两种库放到awesome，还有我们这个阿里的这个Apple found啊，两个都要熟练使用啊，熟练使用好，我们来停一下。