①打开此网站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. ABAP开发需要养成的习惯—程序修改数据库表

    ①此外将内表数据写入数据库,推荐用Modify而不是insert,因为会有些key一样的报dump loop at it_record. *          报错 *          insert ...

  2. PC初始化

    @charset "utf-8"; /* CSS Document */ html{width:%;font-family: ;padding: ;} a{color:#;text ...

  3. angular2.0学习笔记5.关于组件

    1.组件文件应在/src/app文件夹下 2.组件文件命名应遵循小写中线形式,每个单词之间用中线分隔,并且以.component.ts结尾. 如:HeroDetailComponent类应该放在her ...

  4. andorid 多线程handler用法

    .xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android ...

  5. 开源项目CircleImageView

    1.在自己MainActivity所在包下创建CircleImageView.class文件 package 自己包名; import android.content.Context; import ...

  6. Mac OS 10.12 - 在VMwear Workstation12.5.2中以两种方式进入恢复模式（Recovery）！！！

    注意:如果你打算安装Mac OS10.12 到虚拟机里面学习,那么我强烈建议你在没有安装任何其它软件之前,按照我这篇博客来进入恢复模式(Recovery),禁用Rootless机制!!!这样处理后,你 ...

  7. 201621123008 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户通过网 ...

  8. 使用VisualStudio开发php的图文设置方法

    早先在asp横行的年代,php和asp一样,大都都是html中夹杂代码,说实话,这时候IDE的确用处不是很大,倒是类似于dw之类的设计器甚为上手. 现在,三层.mvc之类的思想遍地开花,使得代码和ht ...

  9. Lazarus的二维码解决方案

    不解释,直接上图

  10. 动态加载及Servlet容器加载

    动态加载 动态加载是 Servlet 3.0 中的新特性,它可以实现在不重启 Web 应用的情况下加载新的 Web 对象(Servlet.Filter.Listener). 为了实现动态加载的第一种方 ...