①打开此网站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. Win7 IIS 配置错误：不能在此路径中使用此配置节。如果在父级别上锁定了该节，便会出现这种情况。锁定是默认设置的

    因为 IIS 7 采用了更安全的 web.config 管理机制,默认情况下会锁住配置项不允许更改.运行命令行 %windir%\system32\inetsrv\appcmd unlock conf ...

  2. swift4.2 - 一个自定义view弹框

    import UIKit /* * 注册协议view:没找到 UI原图,咱不实现 */ class JYRegisterProtocolView: UIView { /// 点击同意协议的回调 pri ...

  3. [leetcode]304. Range Sum Query 2D - Immutable二维区间求和 - 不变

    Given a 2D matrix matrix, find the sum of the elements inside the rectangle defined by its upper lef ...

  4. netty 之 传统的阻塞io 体系回顾

    io 体系回顾: 流的概念: java 程序 通过流来进行完成输入与输出的.流是生产或者消费信息的抽象,流通过java 的 输入/输出系统与物理设备相连,尽管与他们链接的物理设备不尽相同,所有流的行为 ...

  5. （二）创建ROS工作空间

     ROS 教程中涉及的和编写的所有 ROS 代码需要有一个地方存放它,这个地方叫做工作空间.可以说,这个工作空间应该是一个大的集合.当我们要编译程序的时候,我们是对整个工作空间进行编译的. 这个工作空 ...

  6. Linux执行命令时遇到的些问题

    1.执行lsb_release -a,提示 未安装lsb_release导致的,执行一下yum install redhat-lsb -y,问题解决 2.配置tomcat站点后重启tomcat,提示找 ...

  7. c#按照回车换行符分割字符串

    string str="aaa\r\nbbscccjdddseee"; string[] sArray=str.Split(new char[2] {'\r','\n'}); 和用 ...

  8. 案例情景--在一次Oracle 数据库导出时 EXP-00008;ORA-00904:EXP-00000: oracle不同版本导入导出规则

    案例情景--在一次Oracle 数据库导出时: C:\Documents and Settings\Administrator>exp lsxy/lsxy@lsxy_db file=E:\lsx ...

  9. Github远程仓库关联

    一.Git的安装 1.git的安装和配置 (1)配置用户名和邮箱,如下所示: $ git config --global user.name [username] $ git config --glo ...

  10. iOS.C

    iOS开发中C语言的应用: 1. NS_ENUM & NS_OPTIONS http://nshipster.com/ns_enum-ns_options/