字体图标 fa fa html5,前端引入icon的方法(iconfont,fontawesome)
前端项目中,经常需要从外引入一些icon图标到项目中,我经常使用的两个icon库就是Iconfont阿里巴巴矢量库,以及font-Awsome。接下来我稍微讲一下这两种的使用方法。
Iconfont阿里巴巴矢量库的使用
使用步骤:
先看一下gif图吧,如果看懂了略过步骤,直接看一下怎么引入
test.gif
1 进入网站之后,搜索想要的icon图标
2 选择所需要的所有icon添加入库,可以点击上方的库存,将所有icon添加到某个项目
3 在我的项目中,选择刚刚添加的项目,然后点击fontClass即可
4 引入图标:将生成的CSS的链接地址引入前端样式
5 在页面中引用进来
// 其中icon-cry就是从阿里icon上面复制下来的代码
切记,就是你每次重新添加或者删除这个项目中的图标之后,都应该重新将生成的CSS代码地址重新更新刷新,如下所示, 然后引入的地址重新更改才有效哦。
image.png
fontAwsome的使用
1 直接进入官网,将icon文件下载下来
image.png
2 然后一般下载下来的文件夹内有这么几个文件,只要保存font 和 css两个文件夹就可以
image.png
3 然后将这个文件引入
4使用
嗯好啦,我觉得icon font基本就可以满足我的基本需求了,而且不用下载文件到本地,当然你也可以下载像fontawsome那么使用,但是我觉得iconfont那样的使用方式就已经很方便了。
字体图标 fa fa html5,前端引入icon的方法(iconfont,fontawesome)相关推荐
- 前端引入icon的方法(iconfont,fontawesome)
Iconfont阿里巴巴矢量库的使用 使用步骤: 先看一下gif图吧,如果看懂了略过步骤,直接看一下怎么引入 1 进入网站之后,搜索想要的icon图标 2 选择所需要的所有icon添加入库,可以点击上 ...
- 字体图标的下载【前端知识】
写在前面的话: 参考视频:黑马程序员pink老师 HTML CSS 入门教程 下载图标官网地址:Icon Font & SVG Icon Sets ❍ IcoMoon 目录 1.选图标 2.下 ...
- html中web字体图标,响应式Web图形篇 —— icon fonts(字体图标)在网页中的应用...
响应式设计(Responsive Design)作为「救世主」的身份,已经在 Web 界布道了好几年,丝毫不亚于当年的「Ajax」先生.其核心就是:针对不同设备和应用场景,作出合理性的适应.狭义地看, ...
- html 字体图标转换工具,HTML5 webfont字体图标的使用
一.参考文献 二.html使用方法 1.下载字体 网上百度自己要使用的字体,一般下载的是ttf格式,需要4种(或5)格式,其他的格式可以通过在线工具基于ttf转换 web-fontmin(这个在线转换 ...
- 元件库导入_最新版字体图标元件库分享,一套绝佳的矢量字体图标元件库
这次分享的FontAwesome v5字体图标元件库,是根据官方的最新版本v5.7.2整理完成的,包含了更全面的图标类型和丰富的图标数量,相信可以满足大多数同学在原型设计中的使用需求. FontAwe ...
- 自学前端第二十五:web字体图标使用
web字体图标:本质是字体,伪元素联用的 出现一个白色框即字体失效的检查: ①路径那里是不是fonts文件夹的第一子路径就是全部的文件. ②/+unicode编码 和 转义编码 有没有弄棍 (一个给c ...
- 使用 IcoMoon 生成字体图标,并在微前端项目中使用
目录 1. IcoMoon 使用步骤 1.1 进入 IcoMoon 新建图集 1.2 选择并生成字体图标 1.3 使用字体图标文件 2. 微前端中实现换肤的一种思路 2.1 使用 CSS 变量 2.2 ...
- vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇 一.登入阿里字体图标库 选择图标加入购物车 下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件 推荐 ...
- 【前端学习之HTMLCSS进阶篇】-- CSS第一篇 -- @规则与web字体图标
[前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标 文章目录 [前端学习之HTML&CSS进阶篇]- CSS第一篇 - @规则与web字体图标 前言 一. ...
最新文章
- 常用API(Object、String、StringBuffer、用户登陆注册)
- oracle时间相减得到天数_【数列】从错位相减到阿贝尔变换
- 关于Advanced Installer 11.0打包软件过程一些记录
- java深度优先迷宫生成_通过深度优先搜索产生的迷宫的Java代码
- mysql主备数据库配置文档_MySQL数据库配置主从服务器实现双机热备实例教程
- 某设备产品漏洞挖掘-从JS文件挖掘RCE
- Python之每个人都应该知道的30个一行代码程序
- python高级玩法_python pandas to_excel 高级玩法
- 【2016年第1期】CCF大专委2016年大数据发展趋势预测—— 解读和行动建议
- Problem C(HDU-5687)
- 《Python编程从入门到实践》记录之类的使用
- mac安装python3.8_mac安装pwntools(python3.8)解决多数问题
- python求矩阵维度必须一致_python数据分析(二)--Numpy
- vs发布项目webconfig替换语法
- java读取照片信息 获取照片拍摄时的经纬度
- 解决Ubuntu安装tensorflow报错:tensorflow-0.5.0-cp27-none-linux_x86_64.whl is not a supported wheel on this
- J2EE 各种关系逻辑图
- 嵌入式工具——iperf
- 黑马品优购项目的总结-首页
- VBA实现批量图片格式转换
热门文章
- Esp32+Dht11+MQTT+Mysql实现测温数据传至数据库
- Latex编写时会遇到在作者名字上字母上加一声,二声,三声、四声或两点等标志
- Excel怎样从一串字符中的某个指定“字符”前后截取字符及截取字符串常用函数
- 红米9A成功root.9秒解锁BL MIUI12 root权限刷 Magisk面具 TWRP
- 关于线宽与PCB过孔铺铜的一点经验
- 职场生存--向上管理
- java 版本区别,java SE是什么,下载JDK时各个名称的含义
- 专访 | 腾讯公司副总裁王巨宏:培养新兴开源力量,为中国技术自主创新添砖加瓦...
- 2020年11月 工信部考试——Hadoop(数据应用技术)中级认证3
- 微信小程序模板信息【详】