初学前端收集的字体图标以及字体网站
抱歉，阿里和icomoon长久不使用，忘得差不多了。
一、字体图标
1.font-awesome
引入CSS:
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css
网址：
https://fontawesome.com/icons/house-chimney?s=solid&f=sharp
<style>span {color: rebeccapurple;font-size: 20px;}</style><linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/><body><span><i class="fa-sharp fa-solid fa-house-chimney"></i></span></body>
效果：
2.ionicons
ionicons
导入JS代码：
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
<style>span {color: aqua;font-size: 20px;}</style><scripttype="module"src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script><scriptnomodulesrc="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script><body><span><ion-icon name="cloud-download-outline"></ion-icon></span></body>
3，lordicon
不想做动画的话这个用起来也还不错：lordicon
4.bootstrap图标库bootstrap
<style>i {font-size: 30px;color: aqua;}</style><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"/><body><i class="bi bi-arrow-down-square"></i></body>
二、字体
商用估计需要申请
1.汉仪字库 用心 绽放文字之美
汉仪
2.造字工房
3.字魂
https://izihun.com/shangyongziti/6931.html
4.英文字体
https://www.fontspace.com/search?q=quick
初学前端收集的字体图标以及字体网站相关推荐
- 字体图标html制作网站,如何制作自己的web字体图标
几乎每一个网站的开发都离不开图标的使用,很多时候,我们使用的都是美工给的png图片.直接用美工给的图片固然方便,但是当图片或页面放大时,就会出现虚化现象,或者如果要变换图标颜色,就需要美工提供多张不同 ...
- 微信小程序使用base64字体图标 （生成字体图标+将字体图标转为base64格式）
问题: 1.微信小程序不能随意使用网络资源,如字体,css文件等 2.不能在小程序中使用字体文件 3.不能使用background-position背景图片定位来使用内部png图片 下面就介绍一下如何 ...
- 字体图标数字字体的引入和使用
/* 声明字体*/@font-face {font-family: electronicFont;src: url(../font/DS-DIGIT.TTF); }ul li {position: r ...
- 前端字体图标,2D变形,以及渐变的使用
一.字体图标 下载字体图标(了解) 字体图标的 选择,上传 UI美工她们来做的,我们了解即可. 使用字体图标(重点) 引入相关文件(前提) 复制相关的文件,到 fonts文件夹里面. 引入 css & ...
- 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（精灵图，字体图标，技巧）
一.基础班学习路线 三.CSS高级技巧 1.精灵图 为什么需要精灵图sprites 精灵图使用(原理) 精灵图使用(代码) 精灵图案例-拼出自己名字 2.字体图标 字体图标产生和优点 字体图标下载 字 ...
- CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- iconfont 字体图标
目前国内使用最多的是iconfont-阿里巴巴字体矢量图标库, 字体图标主要显示网页中通用常用的一些小图标iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标 ...
- CSS——web字体与CSS字体图标
文章目录 web字体 字体格式 字体图标 字体图标优点 字体图标使用流程 设计字体图标 上传生成字体包 下载兼容字体包 字体引入到HTML 第一步:在样式里面声明字体: 告诉别人我们自己定义的字体 第 ...
- css技术点二：字体图标（阿里巴巴字体图标使用）
css技术点二:字体图标(阿里巴巴字体图标使用) 一.什么是字体图标 二.字体图标的好处 三.字体图标用法 四.字体图标格式介绍 一.什么是字体图标 字体图标可以为前端工程师提供一种方便高效的图标使用 ...
最新文章
- 这些云计算技术你了解过哪几种
- php补充安装扩展支持
- 如何解决多地开视频会议直播问题？
- [转]CSS完美兼容IE6/IE7/FF的通用hack方法
- ios网址解析中，中文部分如何处理
- c语言 srand time 0,c++ 随机数 srand(time(0)) 用法 | 求索阁
- 华为任职资格_看了华为的任职资格体系，你就明白员工为啥这么拼？
- 伪集群zookeeper模式下codis的部署安装
- APP测试之使用ADB可能遇到的错误及解决办法
- JavaScript学习（四十）—字面量创建对象图解
- android 中如何监听按键的长按事件
- Unity3D碰撞触发函数
- SpringCloud Alibaba(四) Nacos服务端本地启动和源码浅析(AP架构),Distro协议介绍,CAP原则介绍
- boost电路输出电流公式_Boost电路的参数计算及仿真
- 【Trailhead题目解析】Prepare your salesforce org for users - 5Create Chatter Groups
- mininet-ovs转发行为与流表不对应
- 前端web页面防截屏水印生成方案（网页水印+图片水印）
- 【FinE】期权希腊字母与风险对冲
- Flash Builder 4.6.1的安装与破解
- 正极前驱体生产废水除磷