在uni-app中使用阿里巴巴图标库字体图标
阿里巴巴图标库
添加图标、下载、引入的使用方法:
1、添加图标
2、下载到字体图标文件后,复制圈中的两个文件到static目录下:
3、新建一个自定义字体图标样式文件: font-icon.css
4、给font-icon.css添加内容
5、font-icon.css具体代码:
@font-face {font-family: uniicons;font-weight: normal;font-style: normal;src:url('~@/static/font/iconfont.ttf') format('truetype'); }.icon {color: #999;font-family: uniicons;font-size: 42upx;font-weight: normal;font-style: normal;line-height: 1;display: inline-block;text-decoration: none;-webkit-font-smoothing: antialiased; }.icon.uni-active {color: #1ca6ec; }// 下面的样式直接复制 .iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-fanhuishouye:before {content: "\e631"; }.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.icon-shouye:before {content: "\e63f"; }.icon-fanhuishouye:before {content: "\e640"; }.icon-wode:before {content: "\e641"; }.icon-guanli:before {content: "\e642"; }
6、页面写入字体图标
<view class="icon icon-showye"></view>
在uni-app中使用阿里巴巴图标库字体图标相关推荐
- vue项目引入阿里巴巴矢量图标库 ——字体图标
1. 打开阿里巴巴矢量图标库官网 iconfont-阿里巴巴矢量图标库 2. 下载图标步骤 (1) (2) (3) (4) (5) (6)main.js 配置 引入assets中的图标路径 (7)页 ...
- uniapp项目添加阿里图标库字体图标(图标在手机、浏览器均可查看)
前言 提示:本篇文章正文内容分为: 给uniapp项目导航栏添加字体图标: 在uniapp项目中使用字体图标. 一.给uniapp项目导航栏添加字体图标 1:登录阿里巴巴矢量图标库:https://w ...
- 阿里巴巴矢量图标库icon图标在线引用
阿里巴巴矢量图标库icon图标在线引用 写代码有时候不方便下载图标的时候可以直接引用阿里巴巴矢量图标库的图标,放在代码内 具体步骤如下: 1.进入阿里巴巴矢量图标库选择需要的图标: 2.点击加入购物车 ...
- uni app中使用图表
关于在uni app中运用图表 今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
- 如何在React中引入阿里图标库的图标
一.周所周知 在 Antd Design 中也有一些图标,但是要找到自己想要的图标不是很方便,需要一个一个的找.而且提供的图标数量也不是很多! 而阿里图标库可以通过搜索找到自己想要的图标,图标的数量和 ...
- 如何在vue项目中系统的使用iconfont字体图标
如何在vue项目中系统的使用iconfont字体图标 前言 iconfont的特色 官网注册 在项目中使用的方式 前言 今天聊一下前端iconfont的使用方式,前端的图标经过这些年的发展,变得更系统 ...
- scrapy如何指定生成python3的项目_如何把阿里图标库的图标生成代码并应用于自己的项目...
有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库.那么我们如何才能够把阿狸图标库的图标引用到自己的项目中 ...
- 如何把阿里图标库的图标生成代码并应用于自己的项目
有时候需要用很多图标去完成一定的页面效果和工作展现,框架内置的图标可能满足不了我们的需求,有个很好的图标库想必大家都知道-----就是阿里图标库.那么我们如何才能够把阿狸图标库的图标引用到自己的项目中 ...
- 微信开发工具及Hbuilder中引用阿里巴巴矢量库(步骤一样)
第一步:创建一个阿里巴巴矢量库项目,将图标加入项目中,并生成一个在线的css文件 第二步:在微信开发者工具中新建一个.wxss文件,把第一步中的复制好的代码粘贴到这个文件中,如果将来有新的图标放置项目 ...
- 项目中引入阿里巴巴矢量库(unicode)
首先选择阿里巴巴矢量库添加到项目,下载到本地. 将下列几个文件添加到项目 在main.js中引入 import '../src/assets/scss/iconfont/iconfont.css';
最新文章
- OpenCV 像素存储
- MySQL 怎么给字符串字段加索引?
- Java基础学习笔记三 Java基础语法
- Android插件化技术调研
- Linux IO 多路复用是什么意思?
- 嘉奥丰农显示无法连接服务器,Arcaea无法连接服务器如何解决
- matlab 曲面拟合_利用python进行曲面拟合并进行3D显示
- 如何为网站进行安装SSL证书
- SAP License:财务与会计的区别
- rust怎么造双层_DIY双层电路板 制作详解
- lucene使用与优化
- 区块链学习之《区块链技术指南》读书笔记
- 4ME1,4W1H,5W2H,6W2H,6W3H,6S、8D等……含义?
- 如何通过Photoshop制作Gif图片(把几张图片合成一张Gif图片)
- 伤心的优酷土豆,抗争逆不过命运
- 寓教于乐:12个学习编程的游戏化平台
- 论文阅读笔记《Few-Shot Learning with Global Class Representations》
- 粗糙集理解之一:基本概念
- 百家号不收录限流无推荐阅读为零抄袭的解决方法!
- HR提升丨怎样当一名称职的中层管理者