①打开此网站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. mysql乐观锁总结和实践（二）

    一篇文章<MySQL悲观锁总结和实践>谈到了MySQL悲观锁,但是悲观锁并不是适用于任何场景,它也有它存在的一些不足,因为悲观锁大多数情况下依靠数据库的锁机制实现,以保证操作最大程度的独占 ...

  2. ios 获取当前时间

    1.第一种返回的时间是一个整个的字符串. NSDate *timeDate = [NSDate date]; NSDateFormatter *dateFormatter = [[NSDateForm ...

  3. js实现各种复制到剪贴板的方法

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=d ...

  4. hbuilder header消失

    hbuilder的header在google浏览器中调试能正常显示,但是发布到app安装到手机后headr不显示. <header class="mui-bar mui-bar-nav ...

  5. OnActionExecuting验证用户登录

    代码 using Common; using Service; using Service.IService; using System; using System.Collections.Gener ...

  6. input 原生上传文件（type = file）

    1.表单上传文件的步骤: - 1)设置enctype 默认为:enctype="application/x-www-form-urlencoded"(一般不设置) 若要表单中有需要 ...

  7. log4net引用了Mysql.Data.dll,但是就是不能写到mysql数据库的解决办法

    这两天遇到log4net写日志到mysql数据库中,有时候在A项目中可以,有时候B项目就有问题,有时候测试环境没问题,到正式部署环境又出问题,经过两天的煎熬,终于理清楚了其中的头绪. 1.配置现状 c ...

  8. 关于Vector，map等迭代器问题

    vector.erase(it):后,it自动++,一定要弄清楚,删除成功后it指向删除的下一个地址. 对于map.erase(it),返回值为NULL,而Vector是返回itorator

  9. Eigen解线性方程组

    一. 矩阵分解: 矩阵分解 (decomposition, factorization)是将矩阵拆解为数个矩阵的乘积,可分为三角分解.满秩分解.QR分解.Jordan分解和SVD(奇异值)分解等,常见 ...

  10. Zookeeper简介与使用

    1.   Zookeeper概念简介: Zookeeper是一个分布式协调服务:就是为用户的分布式应用程序提供协调服务 A.zookeeper是为别的分布式程序服务的 B.Zookeeper本身就是一 ...