在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';
最新文章
- 实验室管理系统LIMS有没有好的企业推荐?
- tomact+apache实现web网页动静结合
- 全套Python数据分析常用命令速查表!PDF文档限时分享
- while、do while练习——7月24日
- 谁知道这个代码片段干嘛的
- 核心期刊 计算机应用与软件,计算机应用与软件 统计源期刊北大核心期刊
- 小秘书的福音——使用Word VBA打造自动排版工具
- 《后端成长路线》系列 导航篇
- 技能分享 | 麦肯锡教给我的写作武器:如何讲好一句话
- fastposter v2.6.0 发布 电商海报生成器
- 电子签章过程中的原始数据处理
- Makefile中=, :=, ?=和+=的含义
- PC:各大主板开机启动项快捷键
- 【Python windows11修改器 】——制作一个简易的修改器,修改windwos11右键和一些小功能
- Irvue for Mac(壁纸软件)v2.7破解版
- AdServices归因和iAd归因集成
- esp8266 OLED气象图标显示的来龙去脉
- HTML5 draggable 拖拽实例
- 【Navicate无法连接上mysql】
- 20+时序模型,一款时间序列建模神器:GluonTS
热门文章
- CentOS7安装Pentaho Server 8.1 CE 社区版
- 无根树(无环连通无向图)的Prufer编码
- matlab中将数据存为dat格式,matlab中将数据保存为txt或dat格式四种方案
- 联想微型计算机开机出现省电模式怎么解除,联想显示器节电模式怎么办?节电模式黑屏怎么解除?...
- java excel 批注_Excel里“批注”的各项操作介绍
- 浏览器打印不出div背景颜色
- 电脑连接android手机测试,Android系统手机通过USB连接电脑上网
- java初学者学习路线
- java 注解field_jackson学习之七:常用Field注解
- 企业盈利能力分析-毛利率、销售净利率、投资回报率、权益回报率、资产回报率...