简易字体图标_0.0.2

原创 2016年11月30日 19:24:45

简介

从最传统的小图标到雪碧图再到现在的字体图标,关于这一块的前端的优化目标一直未有变更,今天简单的介绍一下如何用最小的代价来应用字体图标

作者:链上研发-hcy
时间:2016-11-30

字体图标有何优缺点?

  • 轻量、灵活、兼容
  • 清晰不失真
  • 只能被渲染成单色或者CSS3的渐变色,创作自己的字体图标成本大

    回归主题,如何简易的来使用呢?

  • 阿里巴巴的矢量图库可以为我们所用

  • 地址:http://www.iconfont.cn/

我将一步一步讲述该如何使用

注册一个账户

  当然你可以使用其他账户来登陆,比如github的账户或者是新浪微博的账户,这都不是重点,重点是你要有一个账户

创建一个项目

  如下图所示,点击进去创建项目

附图

添加自选图标

  打开之后界面是这样的

附图

  之后去图库搜索自己想要的图标,加进你的'购物车'

附图

  之后点击一下购物车,把他添加到你的项目中即可

附图

导出到本地使用

  最后一步,导出到本地即可

附图

就是这么简单,你就可以使用字体图标
版权声明:本文为链家上海研发中心原创文章,转载请注明出处。

字体图标兼容性,兼容IE

http://www.w3cfuns.com/thread-5597432-1-1.html @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@fon...
  • ForMyQianDuan
  • ForMyQianDuan
  • 2015年12月09日 23:53
  • 3286

配合字体图标的搜索框

一、配合字体图标的搜索框 *{ margin:0px; padding
  • CodingAlarm
  • CodingAlarm
  • 2016年07月14日 10:44
  • 979

菜鸟学前端----图标字体使用详解

字体图标使用方法         字体图标最大的优点就是可以用代码修改样式,看过几个关于使用字体图标的教学视频,我认为最重要的还是学会根据开发人员提供的demo来学习使用,这篇文章主要是讲学习的...
  • xijiaoliumang
  • xijiaoliumang
  • 2016年02月09日 20:34
  • 3302

Bootstrap字体图标

1.若要使用图标,直接引入//显示一个放大镜的查找图标 //显示uesr的大按钮 //标准默认的按钮,大按钮 ...
  • liuwengai
  • liuwengai
  • 2016年06月12日 10:37
  • 610

利用CSS3 @font-face使用图标字体

CSS3可以通过@font-face使用自定义字体,这是让前端工程师拍手称赞的一件事情。在CSS3之前,前端页面的字体只能使用设备中已经安装好的字体。@font-face 可以让前端工程师随心所欲的使...
  • licaomengRICE
  • licaomengRICE
  • 2015年11月26日 18:24
  • 5779

css 使用@font-face 嵌入自定义字体或字体图标方法笔记

通常css使用font-family指定客户端显示字体的样式,本笔记目的在于解决客户端未安装指定字体,导致无法完成设计效果要求。与此同时现在大部分图标使用字体格式,因为它有矢量,体积小等等优点讲解如何...
  • guoguicheng1314
  • guoguicheng1314
  • 2016年11月19日 15:47
  • 5109

如何应用font Awesome矢量字体图标介绍

最近做项目开发的时候,一开始做的时候,网页图标icon都是网上现找的,样式不统一先不说,统统都要引入就很麻烦了,要写各种图片路径,简直烦的不要不要的,后来不经意间接触到矢量图标这个东西,一下子来了兴趣...
  • Iammiky
  • Iammiky
  • 2017年08月04日 10:03
  • 517

小白如何在html css里使用字体图标~

字体图标经常使用的是 阿里图标库的:http://www.iconfont.cn/ icomoon图标库的:https://icomoon.io/ 下面就介绍一下icomoon库的字体图标使用方法~~...
  • html_shine
  • html_shine
  • 2017年03月01日 11:15
  • 4593

做一个萌萌哒的button之图标字体

接上两篇:http://blog.csdn.net/u010037043/article/details/47035087 http://blog.csdn.net/u010037043/art...
  • u010037043
  • u010037043
  • 2015年07月24日 07:49
  • 576

微信小程序使用字体图标

项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。 第一步:下载需要的字体图标 进入阿里图标...
  • nongweiyilady
  • nongweiyilady
  • 2017年07月03日 19:29
  • 6820
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:简易字体图标_0.0.2
举报原因:
原因补充:

(最多只允许输入30个字)