字体图标(iconfont)
图标字体
图标字体(iconfont):
- 在网页中经常需要使用一些图标,可以通过图片来引入图标
但是图片大小本身比较大,并且非常的不灵活
- 所以在使用图标时,我们还可以将图标直接设置为字体,
然后通过font-face的形式来对字体进行引入
- 这样我们就可以通过使用字体的形式来使用图标
fontawesome 使用步骤 :
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
- 直接通过类名来使用图标字体
class=“fas fa-bell”
class=“fab fa-accessible-icon”
<i class="fas fa-bell" style="font-size:80px; color:red;"></i><i class="fas fa-bell-slash"></i><i class="fab fa-accessible-icon"></i><i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
通过伪元素来设置图标字体
1.找到要设置图标的元素通过before或after选中
2.在content中设置字体的编码
3.设置字体的样式
fabfont-family: 'Font Awesome 5 Brands';fasfont-family: 'Font Awesome 5 Free';font-weight: 900; li::before{content: '\f1b0';/* font-family: 'Font Awesome 5 Brands'; */font-family: 'Font Awesome 5 Free';font-weight: 900; color: blue;margin-right: 10px;}
通过实体来使用图标字体:
&#x图标的编码;
<span class="fas"></span>
阿里图标库(iconfont):
阿里巴巴矢量图标库,提供了海量图标,官网:https://www.iconfont.cn/home/index。
第一步:查找图标,并加入购物车
第二步:从购物车中将图标添加至项目
第三步:修改项目中图标的前缀名
第四步:下载至本地并解压缩
第五步:导入项目并应用
参考:(86条消息) Iconfont图标使用详解_空城里的往日时光的博客-CSDN博客_iconfont 修改名称
字体图标(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 方式 首先说明一下,这 ...
- 手把手教你字体图标iconfont如何使用
页面(PC/移动都支持)布局字体图标iconfont的使用 背景:随着用户体验度的提升,现在一些功能性的小图标应用而生,最开始这些图标是图片,然而图片面临可编辑性差,占用内存大的问题.字体图标应用而生 ...
- 只需1步,图片转换成字体图标iconfont
只需1步,图片转换成字体图标iconfont 做项目时,需要一些字体图标,于是找到了下面的网址,好的东西当然要分享出来啦 http://www.ico51.cn/ 我是使用在了title里 <l ...
- react使用字体图标iconfont
react使用字体图标iconfont 第一步,进入到iconfont官网,选择图标管理进入我的项目,点击右上角的+号创建自己的项目: 创建完项目后可以去搜索自己想要的的图标,然后点击添加至购物车: ...
- vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇 一.登入阿里字体图标库 选择图标加入购物车 下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件 推荐 ...
- 字体图标使用教程 阿里字体图标iconfont 鲸鱼编程
官方网址 iconfont-阿里巴巴矢量图标库 https://www.iconfont.cn/ 注册并登陆 寻找自己喜欢的图标 添加 首次使用新建一个项目 生成代码 需要点一下 生成后的结果 使用字 ...
- 【夯实基础--CSS】=> 高级技巧(雪碧图/滑动门/CSS三角形/字体图标(iconfont)等)
CSS高级技巧 CSS用户界面样式 所谓的界面样式, 就是更改一些用户操作样式, 比如 更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
- 字体图标iconfont的使用
什么是iconfont Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具 所以作为一名合格的 ...
最新文章
- Apache支持多端口配置处理
- 针对“永恒之蓝(WannaCry)”攻击紧急处置手册
- 2013年1季度中国汽车品牌口碑研究报告 ——自主A级车
- c++编码风格指南_带回家的编码挑战的基本指南
- 编译vo-aacenc遇到的问题
- 涌之势,智造未来, 戴尔科技集团携新一代信息技术解决方案赋能“新基建”
- Python while循环 - Python零基础入门教程
- mysql租车管理系统_基于java实现租车管理系统
- linux 下的init 0,1,2,3,4,5,6知识介绍
- Java描述设计模式(08):桥接模式
- sql报表按月统计_用Excel如何对销售数据按月分别统计成本,销售额以及利润?...
- 旷视周而进:人脸识别简史与距离对齐技术的应用
- Perl 6 真的太烦人了?
- VMware Data Recovery安装配置
- linux patch 命令小结
- 一款全国产USB3.0网卡方案介绍
- 手机怎么识别图片中的文字?来试试这两个方法吧
- 小记--解决方案: rsyslogd cpu占用率高
- java freemark导出word 实现word分页
- plc的毕业设计冷门题目_PLC毕业设计----PLC毕业设计题目汇总
热门文章
- 佛家语录经典50条(转)
- 读 The Algorithmic Foundations of Differential Privacy(二)
- L349. L350两个数组的交集
- 在线图片转文字怎么转?教你在线就能转换的方法
- 解读Keras在ImageNet中的应用:详解5种主要的图像识别模型
- Ubuntu 16.04lts 安装NVIDIA 私有驱动、cuda、cudnn、tensorflow-gpu等问题
- RESTful的理解
- 一文详解Elasticsearch中的Node角色以及使用方法
- 基于I2C下的温湿度采集实验
- 好用高扩展性的Android平台日志框架Slog