手把手教你字体图标iconfont如何使用
页面(PC/移动都支持)布局字体图标iconfont的使用
背景:随着用户体验度的提升,现在一些功能性的小图标应用而生,最开始这些图标是图片,然而图片面临可编辑性差,占用内存大的问题。字体图标应用而生,它可调整大小颜色,由于是文字占用内存小,可复用性强,而被广泛使用
http://www.iconfont.cn/ 阿里矢量图标库
以下详细讲解它的使用方法:
一、你需要一个电话的小图标
- 打开网址,搜索电话
- 选择你想要的那个图标,如果你不确定那个更适合与你的页面,可选择多个,鼠标移到你要的图标,点击购物车添加入库
- 我当前添加了两个图标,购物车列表有2的提示,点击然后添加至项目,新建项目(你做的一个电商网站,就起个自己知道分类的名字)点击确定
- 在此就不讲解线上链接引入了,因为这样就只能在电脑联网情况下才可以使用,有时还有各种问题
- 点击下载至本地,解压
- 把文件下的iconfont.css文件拷贝到自己的CSS文件下面
- html页面引入该css文件
<link rel="stylesheet" href="css/iconfont.css">
- 挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
<i class="iconfont icon-dianhua"></i>
- 这样在页面就看到我们用的图标啦
可以设置样式
.iconfont.icon-dianhua{font-size: 60px;color: red;
}
10. 在此我就教这一种常用方法了,其他方法压缩文件打开这三个页面,是其他使用方法
11. 如果你的这个项目后续要添加其他图标,搜索,添加到购物车,点击添加到之前的创建的那个项目文件夹下面即可,下载本地,把文件下的iconfont.css文件覆盖旧的就可以
手把手教你字体图标iconfont如何使用相关推荐
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
原文:WPF自定义控件与样式(1)-矢量字体图标(iconfont) 一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序 ...
- 安卓开发使用ttf文字_Android中正确使用字体图标(iconfont)的方法
字体图标 字体图标是指将图标做成字体文件(.ttf),从而代替传统的png等图标资源. 使用字体图标的优点和缺点分别为: 优点: 1. 可以高度自定义图标的样式(包括大小和颜色),对于个人开发者尤其适 ...
- 在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中 引用 阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式 首先说明一下,这 ...
- 只需1步,图片转换成字体图标iconfont
只需1步,图片转换成字体图标iconfont 做项目时,需要一些字体图标,于是找到了下面的网址,好的东西当然要分享出来啦 http://www.ico51.cn/ 我是使用在了title里 <l ...
- react使用字体图标iconfont
react使用字体图标iconfont 第一步,进入到iconfont官网,选择图标管理进入我的项目,点击右上角的+号创建自己的项目: 创建完项目后可以去搜索自己想要的的图标,然后点击添加至购物车: ...
- 手把手教你如何在项目中使用阿里字体图标IconFont
阿里图标官网地址:IconFont-阿里巴巴矢量图标库 一.注册账号 要使用阿里图标,首先你要在它的官网注册一个账号,注册的方式有多种(手机号,Github,微博,阿里域账号),根据你自己的情况进行选 ...
- vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇 一.登入阿里字体图标库 选择图标加入购物车 下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件 推荐 ...
- 字体图标使用教程 阿里字体图标iconfont 鲸鱼编程
官方网址 iconfont-阿里巴巴矢量图标库 https://www.iconfont.cn/ 注册并登陆 寻找自己喜欢的图标 添加 首次使用新建一个项目 生成代码 需要点一下 生成后的结果 使用字 ...
- 【夯实基础--CSS】=> 高级技巧(雪碧图/滑动门/CSS三角形/字体图标(iconfont)等)
CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
最新文章
- B站QUIC实践之路
- 数学--数论--随机算法--Pollard Rho 大数分解算法 (带输出版本)
- 状态机-重叠序列检测
- 模板-1-模板类的特化
- dbscan用 java代码_聚类算法之DBScan(Java实现)[转]
- 云联惠身份认证需要多长时间_欧盟REACH认证需要多长时间【周期、费用、有效期】...
- php 半角,php 中全半角转换
- 筛选出英语与计算机成绩之和,职称计算机和英语考试的成绩什么地方能够查到 – 手机爱问...
- DDD 到底什么鬼?
- 港交所上新衍生工具:“界内证”——交易规则与投资价值全解析
- Google Android8.1镜像WIFI提示“已连接但无法访问互联网“的解决办法
- Thinkpad E430C 跳过电池检测更新bios
- 时序分析模型——MMMC
- 目标跟踪(4)使用dlib进行对象跟踪
- visdom image显示图像(四)
- 2020-10-29matlab中如何将字符串和数字一起输出到Excel中
- 全国计算机四级之网络工程师知识点(五)
- 【备忘】Spring Boot技术栈博客企业前后端
- make[2]: *** [/home/nnnn/calibration/devel/lib/libcalibrationtoolkit.so] Error 1
- 通过身份证号 计算退休日期 例男60岁,女55岁退休
热门文章
- 停车场管理系统 java_跪求JAVA编写的停车场管理系统源代码
- 洪君:查出“张”姓学生中平均成绩大于75分的学生信息查询出每门课程的成绩都大于80的学生
- 离理性太近,离灵魂太远
- 介绍一个基于Spring Redis Lua的无侵入应用级网关限流框架
- 前端小知识:ElementPlus引入阿里图标使用(超详细-手把手教学)
- DVWA-XSS(DOM)Low/Medium/High低中高级别
- 华为畅享20plus和荣耀x10max的区别哪个好
- 2018acm/icpc西安邀请赛总结
- 中国天使投资集中北上广浙苏 天使日益年轻化
- 香港影坛老牌奸角石坚病逝 享年96岁