Iconfont使用手册

Iconfont是阿里巴巴矢量图标库，本文将简单介绍如何快速上手使用Iconfont，自从用上Iconfont后，图片再也不糊了

起因

之前，项目中的logo等图片资源都是UI小姐姐设计好后切给我，然后我将其引入项目中，如下形式：

<img scr="./logo.png" />

但这种方式有一个弊端，就是图片放大后，或者在高分辨率的显示器下面会变得模糊，导致不够清晰，对于一个有高要求高标准的场景而言，显然是不够的，于是团队讨论，决定用上Iconfont，这是一种矢量图片库，由UI小姐姐将图片传到阿里Iconfont网站，然后前端下载并引入即可，非常方便。

下载并使用

登录Iconfont，在我的项目中，共有三种形式，这里我一般选择Font class, 然后点击下载至本地，会得到这样一个文件夹。

将下图中五项copy出来，新建一个myfont文件夹（自定义命名，随便你）

然后，在你的html页面中引入进来

<link rel="stylesheet" href="./myfont/iconfont.css" />

最后，在需要的地方使用即可

<i class="iconfont icon-team"></i>

延伸

Iconfont网站上有很多开源的库，别人已经设计好了，如果公司没有UI设计师，你也可以选择一套自己进行组装，非常自由，当然，矢量库还有，Font Awesome 等，也非常不错，用法嘛，都是大同小异。

Iconfont使用手册相关推荐

小程序开发初体验，从静态demo到接入Bmob数据库完全实现
之前我胖汾公司年会.问我能不能帮忙搞个小程序方便他们进行游戏后的惩罚/抽奖使用.出了个简单的设计图.大概三天左右做了个简单的小程序.目前提交审核了.对于写过一小段时间vue来说小程序很容易上手.写法和 ...
iconfont 图标宽高出问题_一个技巧，100,000,000+PPT图标就可以任性使用！【黑科技第11期】...
#Hello,我是安少# 视觉传达展示好,巧用图标不能少. 提及图标,大家应该都不陌生,生活中处处可见,机场路牌.道路指示.手机App等等,小图标,大作用,一个图标能快速简明扼要的传递信息. (交通指 ...
echarts legend位置_一起读 ECharts 配置项手册之 series[i]-line（上）
之前的文章写得都比较杂,还总是想不到要写点什么-- 所以最近打算把 ECharts 所有系列挨个聊一遍,写一个 series 系列的简单介绍,解决一大段时间的难选题问题- -b,顺便方便比我还新的新手 ...
勇往直前的菜鸟修炼手册
文章目录勇往直前的菜鸟修炼手册自我介绍项目相关项目业务组件相关前端框架和业务组件管理方面走查代码篇日常怎么走查代码企业微信的机器人道具,可以钩住代码push的消息. 假如你是一个前端 ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
分布式训练使用手册-paddle 数据并行
分布式训练使用手册¶ 分布式训练基本思想¶ 分布式深度学习训练通常分为两种并行化方法:数据并行,模型并行,参考下图: 在模型并行方式下,模型的层和参数将被分布在多个节点上,模型在一个mini-batc ...
正则语法完全正则表达式手册_语法格式重点
20211202 https://blog.csdn.net/lc11535/article/details/103266263 该表达式打开re.U(re.UNICODE)标志. python –& ...
CUDA C++编程手册（总论）
CUDA C++编程手册(总论) CUDA C++ Programming Guide The programming guide to the CUDA model and interface. C ...
html iso标准文档,HTML ISO-8859-1 参考手册
# HTML ISO-8859-1 参考手册 HTML 4.01 支持 ISO 8859-1 (Latin-1) 字符集. ISO-8859-1 的较低部分(从 1 到 127 之间的代码)是最初的 ...

Iconfont使用手册

起因

下载并使用

延伸

Iconfont使用手册相关推荐

最新文章

热门文章