①打开此网站http://www.iconfont.cn/ , 选择需要的几个图形 → 加入购物车 → 添加至项目 → 给项目随便命名 → 点击电线连接并点击代码 → 复制代码到css

②在body里写有插入的表情, 两种表示 , 所有代码如下

 <!doctype html>

 <html>

     <head>

         <meta name="" charset="utf-8" content=""/>

         <title></title>

     </head>

     <style type="text/css">

     @font-face {

         font-family: 'iconfont';  /* project id 304378 */

         src: url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.eot');

         src: url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.eot?#iefix') format('embedded-opentype'),

         url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.woff') format('woff'),

         url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.ttf') format('truetype'),

         url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.svg#iconfont') format('svg');

     }

     .iconfont{

         font-family:"iconfont";

         font-size:19px;

         font-style:normal;

     }

     .icon-tel:before{

         content: "\e760";

     }

     .iconfont{

         color:#ff0;

         background:blue;

     }

     </style>

     <body>        

         <ul>

             <li class="iconfont icon-tel"><span>这是一个冬天</span></li>

             <li class="iconfont"></li>

         </ul>

     </body>

 </html>

src: url('iconfont.eot'); /* 兼容IE9*/

src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* 兼容IE6-IE8 */

url('iconfont.woff') format('woff'),/* 兼容chrome、firefox */

url('iconfont.ttf') format('truetype'),

/* 兼容chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('iconfont.svg#iconfont') format('svg'); /* 兼容iOS 4.1- */

③注意:

1注意两种方法 :

  <li class="iconfont icon-tel"><span>这是一个冬天</span></li>

  <li class="iconfont"></li>

2注意写法

  src: url('//at.alicdn.com/t/font_0j1vc2takv3x47vi.eot');

④hover事件直接写

.iconfont:hover{

    color:blue;

    background:red;

}

2018-08-30新更

官网首页导航也有对如何应用的直接说明

如何使用阿里巴巴iconfont矢量图片的更多相关文章

  1. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  2. 阿里巴巴IconFont的使用方式

    一.解释一下为什么要使用IconFont? IconFont顾名思义就是把图标用字体的方式呈现. 其优点在于以下几个方面: 1.可以通过css的样式改变其颜色:(最霸气的理由) 2.相对于图片来说,具 ...

  3. (转)iOS 对矢量图片的支持如何？

    简单说,iOS 支持矢量图片,不过支持的一般.在系统层面上,iOS 对矢量绘图支持得很好.iOS 的 Core Graphics 框架带有很多矢量绘图命令,简单一些的直线.矩形.椭圆,复杂一些的贝赛尔 ...

  4. 阿里巴巴iconfont使用方式

    IconFont的作用就是用字体的格式来取代图片.特殊字体的展示,用得比较多的就是一些纯色的图标,具体主要由当前css3属性里的自定义字体(@font-face)来实现. 1.首先在Iconfont- ...

  5. Iconfont 矢量图标库的应用

    前言: 在项目开发中,不免在标签栏,工具栏等应用各种各样的小图标. 然后老旧的做法就是要UI设计出各种图标并生成图片给到我们,但是这样就存在了一个问题,每次请求页面的时候就需要发送请求请求图片,这样不 ...

  6. Nuxt使用iconfont矢量图标

    Nuxt可以使用各种前端UI框架,这些框架一般都自带的有一些icon图标可供用户使用,但是一般项目开发的时候,UI框架自带的icon是不能满足实际项目需求的,这个时候我们可以自己找一些图片放到本地项目 ...

  7. Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript来打造属于自己的个性化社交分享系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_143 每一个应用程序,其实都会有分享的需求,比如一键分享一篇文章或者一些活动到微博或者微信亦或者是twitter等社交平台,因为人 ...

  8. Iconfont矢量图标平台全面升级

    阿里UX矢量图标库今天全新发布上线了,这次升级相对于老版本做了30多项功能和体验上的改善:赶快来体验一下吧!! 请猛戳:www.iconfont.cn 请猛戳:www.iconfont.cn 设计师p ...

  9. 关于阿里巴巴iconfont的使用方法

    iconfont网址:http://www.iconfont.cn/ 说起iconfont,做前端开发的应该知道它的好处,图标库之丰富,只有你想不到的,没有你找不到的,而且轻量高清.用户在iconfo ...

随机推荐

  1. linux操作Mysql数据库基本命令

    1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...

  2. rosrun和roslaunch

    rosrun allows you to run an executable(可执行) in an arbitrary(任意) package without having to cd (or ros ...

  3. 遇到返回键会退到页面的问题（window.location）

    我的需求是a全局列表页->b展示列表页->c新增页(编辑页)我从b展示列表页,通过编辑进入c编辑页,保存回到b展示列表页. 重,我的b展示列表页,返回要返回的其实是a全局列表页*使用rep ...

  4. python sockerserver tcp 文件下载 udp

    #tcp serverclass MyHandler(socketserver.BaseRequestHandler): def handle(self): # 通信循环 while True: tr ...

  5. 故障处理分析：华为5885v3 cable/ Interconnect (LEFT Panel)

    故障现象: 处理结果: 1.重新把插左前面板,重启,故障消失.

  6. gulp中pipe的作用和来源

    gulp的pipe方法是来自nodejs stream API的,并不是gulp本身源码所定义的. 一.pipe方法的作用 pipe跟他字面意思一样只是一个管道 例如我有一堆文件 var s = gu ...

  7. redis 数据类型为list命令整理以及示例

    常用来制作队列,当然lpush+rpop也能做栈 #将RPUSH RPUSHX LPUSH LPUSHX一并介绍(具体介绍RPUSH和RPUSHX,因为其实就是插入的方向的区别) RPUSH key ...

  8. 关于ip包长度

    http://blog.csdn.net/naturebe/article/details/6712153 这篇文章总结的不错,转自:http://hi.baidu.com/to_wait/blog/ ...

  9. Android.API.Context.getFilesDir()

    1. Context.getFilesDir() http://developer.android.com/reference/android/content/Context.html#getFile ...

  10. Architecture.SOLID-Principles

    SOLID Principles Reference 1. Single Responsibility http://en.wikipedia.org/wiki/Single_responsibili ...