免费的inconfont的用法

html5的时代，用fontface，就是允许你加载第三方字体。建议：图标尽量用inconfont字体库。

pc端或移动端或响应式，都可以用inconfont。

可以用设计师给的图自己切小图标呀雪碧图呀，也可以跟设计师商量让他改成inconfont里的样子，或者让设计师给你svg格式的小图标。

使用步骤：

1.百度搜 inconfont，选择官网 iconfont-阿里巴巴矢量图标库，搜索你需要的图标名称 加入购物车。然后在购物车数字那里点一下，选择 添加至项目（做自己项目或公司项目的话推荐加到项目上，以后修改就很方便），可以引入在线地址也可以下载到本地（推荐下载到本地）。

2.下载后，文件改个名（随便起名字）如“font”，然后文件中（eot、woff、ttf、svg）的后缀的文件，这四种格式是兼容所有文件的设备，把这几个文件一定要放到 “文件改个名（随便起名字）如“font” ” 中，新建的这个css文件（随便起名字）如“font.css”,然后font.css文件里，复制如下代码：

@font-face {
font-family: 'iconfont';
src: url('../font/iconfont.woff2?t=1639725568814') format('woff2'),
url('../font/iconfont.woff?t=1639725568814') format('woff'),
url('../font/iconfont.ttf?t=1639725568814') format('truetype');
}

.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

3.然后在html中，引入“这个css文件（随便起名字）如“font.css””。

4.然后在html中，写 <span class="iconfont"></span> 标签可以换成任何一种，然后如果需要更改样式颜色大小，最好加上定好的class，如:

5.这样就可以更改了，然后用起来很方便哦。

推荐使用 unicode 的应用方式，兼容性好，方便动态调整图标大小，颜色等等。（png图想改都得重新切，比较麻烦。）

总结：当学习一个新的东西时，拿到后，先看其文档。学习其手册，仔细读文字，看使用说明。

免费的inconfont的用法相关推荐

百度云cdn设置州五年制大专_百度云的免费CDN加速的用法与简单评测
百度云加速从早期与加速乐的合作,到目前独立开发和运营的3.0版本,基本上已经完成功能和结构以及全国大部分节点的布局.目前百度云加速有提供免费/付费国内CDN服务(需要BA)以及免费国外CDN服务(如果 ...
wpscan获取免费的API及用法
wpscan 扫描的时候提示没有api 所以扫不到有漏洞的插件提示: [!] No WPVulnDB API Token given, as a result vulnerability data ...
slot多作用域 vue_详解Vue.js 作用域、slot用法（单个slot、具名slot）
作用域HEi免费资源网在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板:HEi免费资源网 {{message}} 这里的message就是一个slot,但是它绑定的是父组件 ...
WAS服务器负载测试软件导读
转帖:出处未知你的Web服务器和应用到底能够支持多少并发用户访问?在出现大量并发请求的情况下,软件会出现问题吗?这些问题靠通常的测试手段是无法解答的.本文介绍了Microsoft为这个目的而提供的免 ...
latex与word之间的各种转化方法
在稿件接收后,经常会遇到出版社要求变更稿件格式,其中最多的是latex变为word格式.如果手工操作,是非常麻烦的,还容易出错.如果钱多得花不了,可以让出版社找人去做这种工作,一般每篇文章几百美元,但 ...
java判断总共天数_java判断两个时间相差得天数
方法一:通过Calendar类得日期比较,在这需要考虑闰年和平年,也要考虑跨年份 /** * date2比date1多的天数 * @param date1 * @param date2 * @retu ...
WAS 服务器负载测试软件使用说明
WAS 服务器负载测试软件使用说明 ( Microsoft Web Application Stress Tool ) 一.建立新脚本方法一.启动 WAS 软件后会自动显示建立新脚本的提示页 ...
【亲测有效】latex转word，对公式很友好！
想要让老师.同学帮忙修改文章,latex转成pdf不好批注,于是找到了latex转word这个攻略,安装软件太麻烦,于是选择了l2rtf ,亲测很有效.其中具体情况如下: 直接从Introductio ...
基于TqSDK的vnpy实盘初始化数据获取
文章目录 1 背景与问题分析 2 核心需求 3 实现方案 4 相关资源 1 背景与问题分析目前vnpy官方开源已经实现了挺多数据源的,如tushare, tq, 同花顺, rqdata等,但是不同数 ...

免费的inconfont的用法

免费的inconfont的用法相关推荐

最新文章

热门文章