小程序 如何是用阿里矢量图

今天给大家说一下  小程序如何阿里矢量图给小程序加图标。

阿里矢量图官网的简单使用

1.首先我们在百度搜索 iconfont 或这是 阿里矢量图

2.创建自己的项目

点击去如图所示

点击去如图所示：填入你自己的的项目名,其他的不用过直接 新建

最终会出来这种的页面

3.搜索你想要的图标

比如我想要新的一个图标

我随便选了一个加入了仓库中

上边会显示你选择几个图像

点进去查看，并选择我刚创建的Good项目

将刚才空白的页面，加入了部分的代码还有自己选择的图标

微信小程序如何操作

创建工具类将你生成的代码复制粘贴，注意@font-face要及时

的刷新（当你加入图标或者编辑图标的时候）

-------------------------------------------

app.wxss里面引入

在页面中使用

这就完事了。

代码如下：

复制转换代码 更换

@font-face {

font-family: 'iconfont'; /* project id 672874 */

src: url( '//at.alicdn.com/t/font_672874_0d3hb8ppdc3r.eot');

src: url( '//at.alicdn.com/t/font_672874_0d3hb8ppdc3r.eot?#iefix') format(' embedded-opentype' ),

url( '//at.alicdn.com/t/font_672874_0d3hb8ppdc3r.woff') format(' woff' ),

url( '//at.alicdn.com/t/font_672874_0d3hb8ppdc3r.ttf') format(' truetype' ),

url( '//at.alicdn.com/t/font_672874_0d3hb8ppdc3r.svg#iconfont') format(' svg' );

}

.iconfont {

font-family: "iconfont" !important;

font-size: 30 rpx;

font-style: normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}

/* 下 返回 */

.orderDown ::after {

content: "\e604";

}

小程序app.wss引入

@import " style/ iconfont. wxss";

页面中如何使用

< text class= 'iconfont whiteOrderDown'> text >

差不多这就完事了。