在我们的开发项目中，图标有2种常用的显示方式，一种是图片，一种是字体图标。而字体图标我们常用的是iconfont。下面我们看下字体图标在小程序种的使用方式
-
先挑选图标，这个没什么好说的。
image.png
-
选择好以后，把选好的图片加入项目，可以新建项目，也可以添加到老项目
image.png
-
然后点击
暂无代码，点击生成
image.png
-
然后把生成的代码全部复制
image.png
-
把复制的代码，存放到我们小程序项目的文件中 ，比如我们在小程序根目录下新建一个
iconfont.wxss文件。(注意，一定要是 wxss结尾的文件，小程序不支持css结尾的文件)把代码复制进去，之所以是根目录下，是考虑到这个字体图片其他页面可能也会用到。方便公用。
image.png
-
然后我们就可以在app.wxss文件里引入我们新建的
wxss文件。这样小程序页面就都可以使用这些字体图标啦
image.png
-
具体的使用
<text class="iconfont icon-bofang"></text>
- 因为是字体图标，所以相关的样式设置就得按照字体来设置了。比如大小用
font-size,颜色用color
自定义组件中，直接去使用iconfont的字体，是不会显示的，因为组件是没有办法调用组件外边的样式的(只有pages下面的文件可以使用全局样式)。因为组件存在一个样式隔离的情况。解决方法，有3种。
- 方法1：在组件的文件夹中，定义iconfont.wxss文件。然后把相关的iconfont样式代码放进来。然后再在组件的wxss样式文件中引入
iconfont.wxss这个字体样式文件，就可以了 -
方法2：调用组件外部传入的样式。
调用组件的时候把样式通过给组件注册属性传入
image.png
然后在组件内的JS文件里，通过externalClasses接收外部传递来的样式
image.png
注意，这种外部传递进来的样式，在组件内部，是不可以通过传递的class来修改样式的。比如字体图片的大小颜色，显示的就是外部传递过来时的样式，如果要修改，可以给字体图标的标签再新增一个class去修改样式就可以了。
- 方法3： 给组件js文件的Component函数，配置
options属性的相关配置
image.png
image.png
网友评论