微信小程序引入外部icon(阿里巴巴矢量图标)的全过程

目录
  • 1.实现效果
  • 2.实现步骤
  • 3.实现代码
  • 总结

1.实现效果

2.实现步骤

阿里巴巴矢量图标库

搜索想要的图标,添加购物车。

添加进自己的项目中

获取代码(注意:当项目更新之后,该代码也需更新)

3.实现代码

新建一个iconFont.wxss,复制上面所得的代码。

/* 当添加新的图标之后,@font-face需要进行更新 */
@font-face {
  font-family: 'iconfont';
  /* Project id 2361238 */
  src: url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.woff2?t=1642320886173') format('woff2'),
    url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.woff?t=1642320886173') format('woff'),
    url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.ttf?t=1642320886173') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* .icon_01 {
  font-size: 40px;
} */

.icon_01::before {
  content: "\e6f1";
}

.icon_02::before {
  content: "\e7bd";
}

.icon_03::before {
  content: "\e61a";
}

引入一个图标,取到他的后四位。

设置图标的大小与颜色

  color: #fff;
  font-size: 40px;

注意点:新增一个图标之后,要更新相应的font-face

使用图标:

在wxss页面引入外部样式:

@import "./iconFont.wxss";
page {
  background-color: #fff;
}

.box {
  margin: 30rpx auto;
  width: 700rpx;
}

.mb20 {
  margin-bottom: 20rpx;
  width: 150rpx;
  height: 150rpx;
  background-color: #551e1e;
  border-radius: 50%;
  line-height: 150rpx;
  text-align: center;
  color: #fff;
  font-size: 40px;
}

.a1 {
  background-color: rgb(61, 148, 224);
  color: #333;
}

.a2 {
  background-color: rgb(123, 231, 177);
  color: #333;
  font-size: 20px;
}
<view class="box flex-row j_b">
  <view class="iconfont icon_01 mb20"></view>
  <view class="iconfont icon_02 mb20"></view>
  <view class="iconfont icon_03 mb20"></view>
</view>

<view class="box flex-row j_b">
  <view class="iconfont icon_01 mb20 a1"></view>
  <view class="iconfont icon_02 mb20 a1 "></view>
  <view class="iconfont icon_03 mb20 a1"></view>
</view>
<view class="box flex-row j_b">
  <view class="iconfont icon_01 mb20 a2"></view>
  <view class="iconfont icon_02 mb20 a2 "></view>
  <view class="iconfont icon_03 mb20 a2"></view>
</view>

总结

到此这篇关于微信小程序引入外部icon(阿里巴巴矢量图标)的文章就介绍到这了,更多相关微信小程序引入外部icon内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 在微信小程序中使用iconfont的最新图文教程

    目录 一.选取需要的icon 二.在微信小程序中使用iconfont 三.其他 总结 一.选取需要的icon 1.在iconfont上选取自己所需要的图标,然后添加到库内 2.将挑选的图标添加到自定义的项目中 3.选择生成font class的代码 4.点击链接进入代码并复制全部 二.在微信小程序中使用iconfont 1.在项目下创建style文件夹,并建立所需要的wxss文件 然后在wxss文件中将在iconfont上生成的css代码全部复制进去 2.在app.wxss内引用 3.使用ico

  • 微信小程序 如何引入外部字体库iconfont的图标

    如何引入外部字体库iconfont的图标,具体如下 直接使用阿里巴巴的网络路径 选择iconfont图标 官网:阿里巴巴矢量字体库 步骤:阿里巴巴字体库使用方法 全局引入app.wxss @font-face { font-family: 'iconfont'; /* project id 518032 */ src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot'); src: url('//at.alicdn.com/t/fo

  • 微信小程序引用iconfont图标的方法

    最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('ico

  • 微信小程序icon组件使用详解

    微信小程序icon组件的实现,具体如下 原生的icon组件的属性 WXML <view class="icon-group"> <icon wx:for="{{typeList}}" type="{{item}}" size="40"></icon> </view> JS Page({ data: { typeList: ['success', 'success_no_circl

  • 微信小程序中使用自定义图标(阿里icon)的方法

    weui提供的图标比较少,有时我们需要更多的图标,可以使用以下方法自定义图标库: 1,到阿里巴巴矢量图标库(http://iconfont.cn/)生成自己的字体图标,下载代码,解压,打开iconfont.css 2,在wxss文件中引用字体 <style type="less"> @font-face { font-family: 'iconfont'; src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAI

  • 微信小程序引入外部icon(阿里巴巴矢量图标)的全过程

    目录 1.实现效果 2.实现步骤 3.实现代码 总结 1.实现效果 2.实现步骤 阿里巴巴矢量图标库 搜索想要的图标,添加购物车. 添加进自己的项目中 获取代码(注意:当项目更新之后,该代码也需更新) 3.实现代码 新建一个iconFont.wxss,复制上面所得的代码. /* 当添加新的图标之后,@font-face需要进行更新 */ @font-face { font-family: 'iconfont'; /* Project id 2361238 */ src: url('//at.al

  • 微信小程序引入Vant框架的全过程记录

    前言 有时候会觉得微信小程序原生的ui差了那么一点点感觉,那么能不能引入三方框架呢?本文以引入Vant来进行举例,共包含8个步骤.不管是不是云开发项目都一样使用. 实现步骤 1. 打开微信小程序的开发工具,进入项目.在项目的根目录文件上点击右键.选择在终端中打开.(注意是根目录) 2. 在命令窗口中键入npm init.然后所有配置都按默认配置进行,只需点击回车键即可. 3. 在命令窗口中键入npm install进行构建,成功之后会在根目录下生成 package.json 和 package-

  • 在webstorm开发微信小程序之使用阿里自定义字体图标的方法

    1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去. 3.在需要使用到图标的页面导入该wxss文件.例如: 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 微信小程序 引入es6 promise

    微信小程序开发两个月了.大家的项目都在不断迭代.已经不是小程序.这时候就会遇到多层回调嵌套的问题.有些目不忍视了.迫不得已引入es6-promise.在微信小程序内测的时候promise不需要手动引入,后来被微信移除了.看看效果. promise详细的介绍我就不说了.有很多大神写过. 看看目录,引入es6-promise就可以用了. 目录 1.网络请求 wxRequest.js 这里只写了get和post. 我经常会在网络请求的时候用微信原生showToast(),所以最后加了finally,方

  • 微信小程序引入VANT组件的方法步骤

    1.右键项目名称->在终端中打开 2.在终端输入 npm init 用来初始化,然后一直回车默认就Ok. 之后项目中会出现 project.config.json 内容为当前项目的配置信息以及依赖包的管理. 3.安装vant依赖包(在终端输入) npm i vant-weapp -S --production 4.进入小程序开发工具,选择左上角 工具->构建npm 完成之后项目里会多出依赖包 5.点击右上角详情并勾选使用npm模块. 6.选择要在哪个pages里使用该组件 这里以pages下的

  • 微信小程序引入Vant组件库过程解析

    前期准备 Vant Weapp组件库: https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &qu

  • 微信小程序引入模块中wxml、wxss、js的方法示例

    先描述下目录结构,见下图 UI页面见下图 其中ok按键是引入的log模块,log模块非page页 indexButton是index页本身拥有的组件,index页直接导入Log模块中的组件,css,事件响应函数. 显示效果如下 app.json的内容如下 下面附上 index.js.index.wxml.index.wxss的代码 下面附上 log.js.log.wxml.log.wxss的代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 微信小程序实现tabbar凹凸圆选中动画效果实例

    目录 1.实现效果 2.实现原理 2.1 引入阿里巴巴矢量图标 2.2 css函数var 2.3 ios底部安全距离 2.4 css属性transition 2.5 box-shadow 2.6 border-radius 3.实现步骤 3.1 实现底部tabbar 3.2 tabbar背景凹凸圆角 4.实现代码 参考链接: 总结 1.实现效果 2.实现原理 2.1 引入阿里巴巴矢量图标 可参考文章:微信小程序引入外部icon(阿里巴巴矢量图标)[1]^{[1]}[1] 2.2 css函数var

  • 原生微信小程序开发中 redux 的使用详解

    前提 复杂场景中有不少数据需要在多个不同页面间来回使用和修改.但是小程序页面直接的数据通信方式十分的简单.通常情况需要自己维护一个全局的对象来存放共有数据.但是,简单的维护一个共有数据实体,会随着业务逻辑的不断复杂化而变的过分庞大,并且数据的修改往往无法很好的溯源.加之公共数据实体中数据的修改和页面的UI之间没有太好的同步手段,往往需要在页面和对应的数据实体中同时都维护一份相同的数据,操作十分的不方便. 之前使用过Taro以react+redux的结构来开发微信小程序,依托redux整体上可以解

随机推荐