Iconfont使用手册

hiYoHoo 发布于2019-08-29 17:22 / 1353人阅读

摘要：下载并使用登录，在我的项目中，共有三种形式，这里我一般选择然后点击下载至本地，会得到这样一个文件夹。

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

起因

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

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

下载并使用

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

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

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

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

延伸

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

云服务器 GPU云服务器 iconfont使用使用手册 python使用手册 cdn使用手册

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114281.html

Iconfont使用手册

摘要：下载并使用登录，在我的项目中，共有三种形式，这里我一般选择然后点击下载至本地，会得到这样一个文件夹。 Iconfont是阿里巴巴矢量图标库，本文将简单介绍如何快速上手使用Iconfont，自从用上Iconfont后，图片再也不糊了起因之前，项目中的logo等图片资源都是UI小姐姐设计好后切给我，然后我将其引入项目中，如下形式：但这种方式有一个弊端，就是图片放大后，或者在高分辨率...

Yang_River 2019-08-02 12:05 评论0 收藏0
首次踏入vue坑——阅读zhihudaily-vue源码

摘要：之前用的技术栈都是上找的的脚手架，第一次看项目的源码。感觉一个文件里包含模板对应和样式的组合方式，使得组件化更加明显，也降低了平时项目中的小文件数量。相比于的，使用在原生标签里插入属性和一些模板表达式来展示数据，显得简洁了许多。之前用的技术栈都是yeoman上找的webpack+react的脚手架，第一次看vue项目的源码。感觉一个vue文件里包含html模板、对应JS和样式的组合方...

JasonZhang 2019-08-22 10:47 评论0 收藏0
Iconfont 在HTML中的使用

摘要：与使用方式相比，具有如下特点兼容性良好，支持，及所有现代浏览器。相比于语意明确，书写更直观。不过因为本质上还是使用的字体，所以多色图标还是不支持的。一、准备阶段：　　a.进入阿里巴巴矢量图标库www.iconfont.cn挑选所需的图标，加入购物车　　　　　b.点击网页中的购物车下载代码　　二、3种方法实现 Iconfont 的HTML显示 Unicode 引用 Unicode...

番茄西红柿 2019-04-23 11:42 评论0 收藏0
iconfont的使用方法(更新了一些内容）

摘要：方式和方式是极其相似的，只不过他们一个用的是图标的字体编码，一个用的是图标的引用而已是使用了引用的类名，可在下载的中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看。字体图标iconfont阿里官网传送门： http://www.iconfont.cn/打开首页的小图标好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...

tianlai 2019-08-23 11:39 评论0 收藏0
字体图标的使用

摘要：字体图标的不足既然字体图标那么有效率，那么为什么不都使用字体图标呢现在的限制主要是字体图标的开发要求比较高，毕竟是开发一种字体。自己开发字体图标很累，幸好有很多乐于分享的，现在有很多网站把一些常用的图标都做成了字体图标分享了出来。目录字体图标的介绍 iconfont的使用基于unicode的用法： ...

shuibo 2019-04-23 11:54 评论0 收藏0