font-face字体图标和inconfont矢量图标库

font-face字体图标

font-face是css3中的一个模块，他主要是把自己定义的web字体嵌入到你的网页中。
好处:
1.可以非常方便的改变大小和颜色
2.放大后不会失真
3.减少请求次数和提高加载速度
4.简化网页布局
5.减少设计师和前端I程师的工作量
6.可使用计算机没有提供的字体

inconfont矢量图标库

inconfont矢量图标库 https://www.iconfont.cn

下载到本地解压
这个告诉如何使用

可以拖到浏览器中打开或者双击点开

将上面解压到的拷贝到自己需要的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./images/iconfont.css">
</head>
<body><span class="iconfont icon-quan"></span>
</body>
</html>

运行结果

彩色图标引入

跟上面一样

打开选择symbol

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./images/iconfont.js"></script><style>
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style></style>
</head>
<body><svg class="icon" aria-hidden="true"><use xlink:href="#icon-pingguo"></use></svg>
</body>
</html>

运行结果

自定义字体图标

在线生成字体图标https://icomoon.io/app

首先准备好自己的图形

然后选择download下载
然后跟上面一样

font-face字体图标和inconfont矢量图标库相关推荐

Bootstrap 字体图标和自定义矢量图标
一.Bootstrap 字体图标 Bootstrap包括250多个来自 Glyphicon Halflings 的字体图标. 使用:将图标类应用到这个 <span> 或者<i> ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
微信小程序引入外部矢量图标（阿里巴巴矢量图标）
1.显示效果 2.实现步骤进入阿里巴巴矢量图标库搜索想要的矢量图标并加入购物车,点击右上角购物车将图标添加至项目更改项目设置将字体格式设置为TTF Base64 点击下载至本地在微信小程序 ...
vue-cli引入iconfont图标（阿里巴巴矢量图标库）
官网:iconfont-阿里巴巴矢量图标库 1.上官网搜索需要的图标,依次"添加入库" 2.点开右上角购物车,将所有图标"添加至项目"(已有项目/新建项目) 3 ...
支持哪些格式的图标_免费矢量图标素材资源网站，您一定会有需要（建议收藏）...
做设计.自媒体的朋友们,以及脑图爱好者,一定有过到处找矢量图标资源的经历,现在为大家推荐几个免费的矢量图标素材资源网站,对提高生产力很有帮助. 一.Iconfont-阿里巴巴矢量图标库链接:http ...
免费矢量图标网站有哪些？
图标作为UI设计的必要元素,矢量图标是质量的保证.据说完美的用户体验应该从灵活性开始 .在响应设计盛行的当下,灵活矢量图标的重要性不言而喻.在这种情况下,风格齐全.质量上乘的矢量图标网站堪称设计宝藏. ...
QT使用阿里巴巴矢量图标库设置窗口图标、菜单栏项图标、工具栏项图标、状态栏图标以及将控件设置为图标
在阿里巴巴矢量图标库官网上下载图标,具体操作在下方有讲解. 在QT项目中设置图标示例. 我总结了一下需要设置图标的地方大致分为5个,如下: 1. 设置窗口图标(利用setWindowIcon()属性实 ...
html如何让网页有图标,HTML设置网页图标的两种方法
在写HTML页面时少不了要使用各种小图标,来丰富页面元素. 我们经常会使用两种方式来做网页图标背景精灵矢量图标库使用背景精灵实现网页图标通俗的讲就是把小图标整合到一张图中,然后在css引入背景 ...

font-face字体图标和inconfont矢量图标库

font-face字体图标

inconfont矢量图标库

自定义字体图标

font-face字体图标和inconfont矢量图标库相关推荐

最新文章

热门文章