Iconfont使用手册

安全部
• 阅读 2232
Iconfont是阿里巴巴矢量图标库,本文将简单介绍如何快速上手使用Iconfont,自从用上Iconfont后,图片再也不糊了

起因

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

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

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

下载并使用

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

Iconfont使用手册
将下图中五项copy出来,新建一个myfont文件夹(自定义命名,随便你)
Iconfont使用手册
然后,在你的html页面中引入进来

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

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

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

延伸

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

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
4年前
UIWebView长按保存图片和识别图片二维码的实现方案(使用缓存)
0x00需求:长按识别UIWebView中的二维码,如下图长按识别二维码0x01方案1:给UIWebView增加一个长按手势,激活长按手势时获取当前UIWebView的截图,分析是否包含二维码。核心代码:略优点:流程简单,可以快速实现。不足:无法实现保存UIWebView中图片,如果当前We
皮卡皮卡皮 皮卡皮卡皮
4年前
「uniapp」自定义iconfont
1.进入2.搜索自己需要的图标点击加入购物车中3.将购物车中的图标添加到项目中首先进入购物车点击添加至项目,没有项目就新建一个项目4.将图标下载至本地5.将文件复制到uniapp项目中//将.ttf文件@/common引入@fontfacefontfamily:"iconfont";/Projectid2570483
CuterCorley CuterCorley
4年前
uni-app入门教程(9)字体库、自定义组件、打包和新闻实战
前言本文主要介绍了4方面内容:在uniapp项目中使用iconfont提供的图标字体库,美化页面;实现自定义组件,并且可以自定义属性和实现父子组件之间的消息传递;微信小程序预览和真机测试,APP端云打包和本地打包;新闻列表和详情实战练习。一、使用iconfont字体库uniapp中可以使用iconfont()提供的图标字体。大致过程如下:
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
4年前
(绝对有用)iOS获取UUID,并使用keychain存储
UDID被弃用,使用UUID来作为设备的唯一标识。获取到UUID后,如果用NSUserDefaults存储,当程序被卸载后重装时,再获得的UUID和之前就不同了。使用keychain存储可以保证程序卸载重装时,UUID不变。但当刷机或者升级系统后,UUID还是会改变的。但这仍是目前为止最佳的解决办法了,如果有更好的解决办法,欢迎留言。(我整理的解决办法的参
Wesley13 Wesley13
4年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
安全部
安全部
Lv1
共看明月应垂泪,一夜乡心五处同。
文章
4
粉丝
0
获赞
0