Vue移动端项目——字体图标的使用
使用 iconfont 制作字体图标
设计师为我们单独提供了设计稿中的图标,为了方便使用,我们在这里把它制作为字体图标。
制作字体图标的工具有很多,在这里我们推荐大家使用:https://www.iconfont.cn/。
(1)登录 iconfont
(2)创建项目
项目名称:头条移动端
项目描述:可选的
FontClass/Symbol 前缀:toutiao-
Font Family:toutiao
注意:Font Class 和 FontFamily 最好符合上述规则,例如:foo- 和 foo、abc- 和 abc
(3)上传图标到项目中
点击上传图标至项目
将图标文件拖拽到页面上传或者点击上传
选择课程资料中所有的图标文件
去除颜色并提交
如图所示,添加完成
(4)将图标资源导入到项目中
参考官方文档的使用帮助。
点击生成代码
复制链接中的代码
在项目中创建 src/styles/icon.less 并写入上面复制到的代码。
@font-face {font-family: "iconfont"; /* Project id 2653381 */src: url('//at.alicdn.com/t/font_2653381_sp7hbd3vtq9.woff2?t=1625535560625') format('woff2'),url('//at.alicdn.com/t/font_2653381_sp7hbd3vtq9.woff?t=1625535560625') format('woff'),url('//at.alicdn.com/t/font_2653381_sp7hbd3vtq9.ttf?t=1625535560625') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-gengduo:before {content: "\e605";
}.icon-pinglun:before {content: "\e606";
}.icon-shanchu:before {content: "\e607";
}.icon-shoucang:before {content: "\e608";
}.icon-sousuo:before {content: "\e609";
}.icon-fenxiang:before {content: "\e60a";
}.icon-guanbi:before {content: "\e60b";
}.icon-dianzan:before {content: "\e60c";
}.icon-shouye:before {content: "\e60d";
}.icon-lishi:before {content: "\e60e";
}.icon-shipin:before {content: "\e60f";
}.icon-dianzan2:before {content: "\e610";
}.icon-shouji:before {content: "\e611";
}.icon-youjiantou:before {content: "\e612";
}.icon-yanzhengma:before {content: "\e613";
}.icon-wuwangluo:before {content: "\e614";
}.icon-wode:before {content: "\e615";
}.icon-yuedu:before {content: "\e616";
}.icon-wenda:before {content: "\e617";
}.icon-zuopin:before {content: "\e618";
}
然后在 src/styles/index.less 中加载 icon.less。
最后就是如何使用:使用 i 标签,给两个类名,一个是字体类名 iconfont,一个是图标类名 icon-xxx。
使用 Vant 中的图标
Vant 组件库内置了一套非常精致的字体图标,除基本功能之外还支持徽标提示等功能。
<!-- 基本展示 -->
<van-icon name="chat-o" /><!-- 设置dot属性后,会在图标右上角展示一个小红点 -->
<van-icon name="chat-o" dot /><!-- 设置badge属性后,会在图标右上角展示相应的徽标 -->
<van-icon name="chat-o" badge="9" />
Vue移动端项目——字体图标的使用相关推荐
- vue 移动端项目字体适配
shop vw适配 .browserslistrc文件删除"not dead" 安装依赖 cnpm i postcss-import postcss-url postcss-asp ...
- Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库)
Vue.js - Font Awesome字体图标的使用详解(vue-fontawesome库) Font Awesome 是一个十分优秀的第三方图标库,我之前也写过文章介绍如何在 html 页面中使 ...
- vue移动端项目基础框架搭建
本文章,主要提供vue移动端项目基础框架搭建思路,每个独立的模块网上有很多相关的文档. 移动端vue项目基础框架搭建,主要包括6个步骤 项目使用的脚手架vue-cli搭建模板,2.使用淘宝lib-fl ...
- 在vue中如何使用字体图标(阿里巴巴)
在vue中如何使用字体图标(阿里巴巴) 1.选择需要的图标加入购物车. 2.打开购物车,添加至项目. 3.点击生成在线代码 4.点击下载至本地,放入需要文件夹下,可以放入assets下. 5.在sty ...
- 2021-03-24 从零开始搭建vue移动端项目
从零开始搭建vue移动端项目 一.Vue项目搭建 二.使用步骤 1.初始化 2.路由 3.Vuex(状态管理) 4.Axios(数据请求模块) 5.使用Less 6.移动端适配 7.注意事项 8.移动 ...
- vue移动端项目缓存问题实践
最近在做一个vue移动端项目,被缓存问题搞得头都大了,积累了一些经验,特此记录总结下,权当是最近项目问题的一个回顾吧! 先描述下问题场景:A页面->B页面->C页面.假设A页面是列表页面, ...
- 小程序分包加载不同项目字体图标引用问题
小程序分包加载不同项目字体图标引用问题 问题描述: 当主项目中使用了字体图标样式 子项目中也使用了字体图标样式,如果2个项目的字体图标不来自同一个地址的引用,会存在字体图标乱码现象 如 商城中分包加载 ...
- Vue 移动端项目创建
前言 移动端我们一般通过Vue脚手架手动自定义创建项目, 只需要Node环境我们就可以通过npm下载Vue脚手架,通过命令创建项目. npm下载脚手架 npm install -g @vue/cli ...
- vue移动端项目日历组件,月周切换,点击进入上/下一个月
项目场景: Vue移动端项目的日历组件,移动端如果没有别的特别要求,一般用vant中的日历组件就OK,这里用的另一个.组件是网上找的,原网址:vue-hash-calendar,需要的请自行去看. 我 ...
最新文章
- 将jsp页面转pdf
- scrapy架构解析
- 微信小程序+TP5——token令牌生成
- OSPF邻接关系的建立步骤
- 855旗舰烂大街了,Ov俩兄弟数字系列旗舰却仍用710?
- 数学建模方法-多项式拟合
- 2021年啤酒酿造行业发展研究报告
- 互盾科技:博观而约取,厚积而薄发
- 显示器间歇性黑屏问题排查
- 多维数组扁平化的方法
- 前端在登录时如何将用户密码加密
- 如何解决mac拔掉耗电量太大的设备以重新启用usb设备
- 计算机二级考试题目分值,计算机二级考试题目分值
- Python编程:从入门到实践------第6章:字典
- 网站正式上线之前的ICP备案和公安联网备案
- Java基础知识(七)
- 浙大计算机学院辅导员,浙大博士应聘辅导员被指丢脸 月薪仅1000元
- 大数据ssm项目案例总结
- 2021年G1工业锅炉司炉考试及G1工业锅炉司炉证考试
- 相容或,排斥或的相关符号化问题,即排斥或在符号化时一定是只出现∧吗
热门文章
- python sort怎么用,Linux Sort命令详细用法(有实例)
- get clone 出现 fatal: the remote end hung up unexpectedly5 MiB | 892.00 KiB/s 报错信息
- Java笔记06-Map集合
- 【python】解决:TypeError: can't send non-None value to a just-started generator
- Qt Console Application 与 Qt GUI Application互转
- FreeRTOS系列第19篇---FreeRTOS信号量
- windows和linux加密u盘,linux挂载windows的各种格式U盘
- iOS 打包.framework(包括第三方、图片、xib、plist文件)详细步骤及需要注意的地方...
- URLEncoder.encode问题
- Makefile文件(四)_书写命令