霍常亮淘宝客app开发系列视频课程第32节：在插件市场获取图标字体原创

Hello，大家好，我是霍长亮，非常高兴和大家一起学习关于领域搭建的课程，那么我们上一节课，咱们对于。顶部的导航啊，已经做的八九不离十了，但是呢，我们来看一下，在左侧这里呢，我们想要实现的是一个啊，比如说是一个放大镜啊，是一个搜索的类似的一个图标，对吧，那么我们现在呢，它只是一个方块，这节课我们就要讲的是关于。一个字体啊，怎么把它适配上。呃，主要呢，有两种方法，第一种呢，就是我们类似之前讲的使用阿里的啊视角图标库那种方式呢，因为咱们之前已经说过了，所以说在这里呢，咱们不做赘述，所以咱们讲一点新的东西来让大家更好的去学习APP的。搭建。我们直接在插件市场之中。

搜索一个和。图标相关的啊。那么我们现在。进入啊，进入插件市场。他的市场的地址呢，呃，我们在幻灯片里面可以直接看到，然后我们把这个地址复制在我们的浏览器中进行打开，然后呢，我们搜索和图标字体相关的。然后我们在这里搜索is。之后呢，我们可以看到呢，有很多个搜索结果啊，第一个呢，是我们用的最多的这个也是cloud官方啊。分享的一个图标库，然后呢，我们可以在这里面进行选择。

后面的呢，我们也可以看一下。对吧，可以根据你的需要进行选择，只要是免费的，我觉得都可以看。比如说啊，我们就用它啊举个例子，咱们选中，然后打开。之后呢？我们进入到他的介绍页面啊，你想看的话，也可以看到下面对吧，就是一些常见的图标。然后。我们点击这里的导入。打开WX之后呢，我们是要把它和哪一个进行挂钩啊对吧，咱们现在是淘宝客002这个项目之后我们点击确定。导入成功对吧，这个时候呢，我们看看多了什么。

对吧，我们多了一个UN models对吧，这些东西。这就是我们增加的这个图标字体。导入之后啊，我们找到原来咱那个放大镜啊，咱那个方块，找到这个方块的位置对吧，是在这里。我们给他整了一个占位符，当时是就是这个一个这个一个东西，就这么一个方块啊，一个边框。对吧。里边呢，实际上没有什么东西，只不过咱们呃，弄了一个十乘十的一个方块，然后还有一个一插的一个边框。之后我们在这儿呢，可以给它进行一个调整，咱们现在是要换成。换成一个放大镜对不对。

我们直接在这替换，或者说咱们看一下官方的这个介绍方法。呃，在模块中，在模板中使用。我们直接复制一下。然后粘贴，然后咱们点击一下保存。啊，这个时候你会发现这里边你就多了一个。图标对不对，那么我们上面它用来占位的这个东西，咱们就可以把它暂时先屏蔽掉。啊，但是呢，这里呢，它出现的是一个人头，我们想要的一个搜索，通常是指一个放大镜，对不对，那么我们。怎么找出放大镜所对应的这个单词？在这里啊，拿到最后组件福利。图标啊，你找一个跟搜索长得相关的差不多的。

朋友圈我们直接搜一下行不行啊。抽屉悬浮收藏九宫格图标。啊，这有这有一个跟放大镜色是相关的。我点完之后它变成蓝色，是不是点完之后就复制了呀。啊，没有复制，那么我们看它这个字就行了，咱们手动打一下吧，对吧。CHCH。我们在这12CH。

小写的12CH，然后点击一下保存对吧，这里呢就变成了放大镜，但是呢，它这个太大了，对吧，我们后边有一个四题的这个size就是肯定就是大小啊，我们调成一个20，我们看一下。诶，这个大小就差不多了吧，啊，相对来说还行还凑合。啊，这边呢是H5，然后我们看看在微信里面。微信里面怎么没有变呢啊。重启一下啊，咱们把这个微信小公具。对吧，微信中啊也能够有所显示，对吧，演变成了一个放大镜的一个符号啊，就是整成了一个以字体形式所展现的一个图标。

之后呢，你这不仅能设置这个号对吧，你还可以设置颜色之类的。比如说咱们后面加一个，但是我觉得他人家这默认颜色就可以了，你要想设置好也可以。Color，比如说来一个红色的。然后我们保存一下。对吧，这里呢，就变成了红色。其实我个人觉得你看咱们正常的搜索啊，是不是都是一个一个灰色黑色为主的，对吧。所以说这个位置觉得不留也行，咱们只是讲这个方法，如果说将来你想要改颜色，就接加color就可以。觉得这样的一个黑色就可以了。

这个是调用的方法。然后我们再把。好，那么这节课呢，我们主要讲的就是一个图标啊，因为如果说没有这个。图标插件啊，我们在阿里巴巴矢量库容也可以，但是因为之前已经讲过了嘛，所以说咱们就讲点之前没有讲过的东西。好的啊，那么咱们这节课的内容呢，比较简单啊，就是关于一个这个图标的一个操作方式，好感谢您的关注，我是火长亮啊，如果说对于淘宝客感兴趣，或者对APP感兴趣，欢迎加我的QQ或者微信，期待我更多机会与大家进行合作交流。

拜拜。