编程 Javascript

微信小程序导入图标实现过程详解

Posted in Javascript onOctober 11, 2019

图片素材库——阿里巴巴矢量图https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1359989”

在页面输入要搜索的图标

微信小程序导入图标实现过程详解

点击“入库”，然后“添加至项目”

微信小程序导入图标实现过程详解

选择“编辑”，即对进行编辑成自己想要的效果,名字为home

微信小程序导入图标实现过程详解

点击保存——下载至本地，则下载量、了一个.zip的压缩包

微信小程序导入图标实现过程详解

其中demo_index.html内有导入的方法记录

选择iconfont.css文件，点击计算机的“查看”，勾选“文件扩展名”，将.css改为.wxss

微信小程序导入图标实现过程详解

在小程序里新建一个目录，并将改名后的.wxss文件放入文件夹

微信小程序导入图标实现过程详解

在项目的.wxss中加入

@important"../../*/iconfont.wxss"

在.wxml中加入

<icon class=" iconfont icon-home"></icon>

保存，则导入了图标

微信小程序导入图标实现过程详解

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

微信小程序导入图标实现过程详解

- Author -

EN_T

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript flash下fromCharCode和charCodeAt方法使用说明

Jan 12 Javascript

javascript在IE下trim函数无法使用的解决方法

Sep 12 Javascript

jQuery使用$.get()方法从服务器文件载入数据实例

Mar 25 Javascript

整理AngularJS中的一些常用指令

Jun 16 Javascript

js将滚动条滚动到指定位置的简单实现方法

Jun 25 Javascript

Mvc提交表单的四种方法全程详解

Aug 10 Javascript

JavaScript时间戳与时间日期间相互转换

Dec 11 Javascript

vue中使用codemirror的实例详解

Nov 01 Javascript

微信小程序列表中item左滑删除功能

Nov 07 Javascript

浅谈vuex actions和mutation的异曲同工

Dec 13 Javascript

JS实现时间校验的代码

May 25 Javascript

vue实现简易音乐播放器

Aug 14 Vue.js

在vue中高德地图引入和轨迹的绘制的实现

Oct 11 #Javascript

vue实现点击按钮下载文件功能

Oct 11 #Javascript

浅谈TypeScript 用 Webpack/ts-node 运行的配置记录

Oct 11 #Javascript

详解vue 自定义组件使用v-model 及探究其中原理

Oct 11 #Javascript

JsonProperty 的使用方法详解

Oct 11 #Javascript

vue element upload组件 file-list的动态绑定实现

Oct 11 #Javascript

解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题

Oct 11 #Javascript

微信小程序 导入图标实现过程详解

微信小程序导入图标实现过程详解