一、html网页的使用步骤：

1. 登录进入阿里巴巴矢量图标库中，选择自己喜欢的图标，放到购物车，http://www.iconfont.cn/plus/manage/index?manage_type=myprojects&projectId=210792 ；

2. 新建一个项目，保存到项目，下载到本地。

3. 网页使用时候，首先在html网页包含：

        @font-face {font-family: "iconfont";

          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- */

        }

        .iconfont {

          font-family:"iconfont" !important;

          font-size:42px;

          font-style:normal;

          -webkit-font-smoothing: antialiased;

          -webkit-text-stroke-width: .2px;

          -moz-osx-font-smoothing: grayscale;

        }

完整demo：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>IconFont</title>

    <link rel="stylesheet" href="demo.css" />

    <style type="text/css">

        @font-face {font-family: "iconfont";

          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- */

        }

        .iconfont {

          font-family:"iconfont" !important;

          font-size:42px;

          font-style:normal;

          -webkit-font-smoothing: antialiased;

          -webkit-text-stroke-width: .2px;

          -moz-osx-font-smoothing: grayscale;

        }

    </style>

</head>

<body>

    <div class="main markdown">

        <h1>IconFont 图标</h1>

        <ul class="icon_lists clear">

                <li>

                <i class="icon iconfont"></i>

                    <div class="name">好友印象</div>

                    <div class="code">&amp;#xe601;</div>

                </li>

                <li>

                <i class="icon iconfont"></i>

                    <div class="name">酒店印象</div>

                    <div class="code">&amp;#xe645;</div>

                </li>

                <li>

                <i class="icon iconfont"></i>

                    <div class="name">品牌印象</div>

                    <div class="code">&amp;#xe6c4;</div>

                </li>

        </ul>

    </div>

    <div> <i class="icon iconfont"></i></div>

</body>

</html>

4. 引用哪个，输入:

  <i class="icon iconfont"></i>

阿里巴巴矢量图标的使用Demo的更多相关文章

  1. 微信小程序里使用阿里巴巴矢量图标

    登录 阿里巴巴矢量图标 (https://www.iconfont.cn) 选中图标,加入购物车图标 下载源代码 解析出来如下文件结构 有两种使用方式: 1)不转换成base64的文件 找到 icon ...

  2. MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

    MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...

  3. 微信小程序引用阿里巴巴矢量图标iconfont

    最近在写微信小程序,但是引用图片,导致项目文件太大,所以就想到引用阿里巴巴矢量图标的方法 第一步:下载阿里巴巴矢量图代码: 第二步:将下载下来的文件中iconfont.ttf转换即可.转换地址:htt ...

  4. [RN] React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题

    React Native 解决 使用 阿里巴巴 矢量图标库 iconfont 图标不垂直居中问题 解决方法: 添加 size,  line-height ,值为和 height 一样的高度. 例如: ...

  5. [RN] React Native 使用 阿里巴巴 矢量图标库 iconfont

    React Native 使用 阿里巴巴 矢量图标库 iconfont 文接上文: React Native 使用精美图标库react-native-vector-icons 本文主要讲述 如何 使用 ...

  6. 阿里巴巴矢量图标库（iconfont）批量全选的方法

    阿里巴巴矢量图标库: https://www.iconfont.cn/ 浏览器打开调试面板,进入 console 调试面板(Google浏览器快捷键F12)或者在页面空白处,点击右键->审查元素 ...

  7. Vue中如何引入第三方icon库（阿里巴巴矢量图标库）

    1.进入阿里巴巴矢量图标库: 2.新建项目 3.前缀注意不要跟element-ui自带的icon(el-icon)重名就ok 4.创建完成后,去阿里选自己要使用的图标,加入购物车           ...

  8. 超棒的阿里巴巴矢量图标库——支持IE6

    Iconfont.cn 是由阿里巴巴UX部门推出的矢量图标管理网站,也是国内首家推广Webfont形式图标的平台.网站涵盖了1000多个常用图标并还在持续更新 中,Iconfont平台为用户提供在线图 ...

  9. 阿里巴巴矢量图标库（Iconfont）-利于UI和前端的搭配

    前端时间,做一个小网站的时候,需要用到很多小图标,UI设计好之后不知道如何使用,如果使用图片那会很麻烦,相信一些前端更喜欢iconfont这样的标签直接调用,这样包括颜色和大小以及使用都更方便快捷,于 ...

随机推荐

  1. 百度地图api

    引入js <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak ...

  2. MyBatis学习总结(三)——优化MyBatis配置文件中的配置（转载）

    本文转载自:http://www.cnblogs.com/jpf-java/p/6013548.html 一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置 ...

  3. 【java基础学习】反射

    1. 什么是反射 Class.Method.Field.Constructor,它们是反射对象.它们是类.方法.成员变量.构造器,在内存中的形式. 也就是万物皆对象!类是类型.方法是类型.成员变量是类 ...

  4. wed应用程序开发原理

    ---恢复内容开始--- 企业应用演变的模式 1.主机/哑终端的集中计算模式 时间二十世纪七十年代,企业应用程序是围绕一个中心大型主机建立的.特点 大,贵,专用.只有输入输出功能,没有处理能力,全部是 ...

  5. CSS之viewport 2

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕. 这篇文章我们来聊聊关于移动浏览器的内容.如果你对移动开发完 ...

  6. http://www.cnblogs.com/Lawson/archive/2012/09/03/2669122.html

    http://www.cnblogs.com/Lawson/archive/2012/09/03/2669122.html

  7. DEDE有无缩略图如何调取

    同一样式分开调取 [field:array runphp='yes']@me = (strpos(@me['litpic'],'defaultpic') ? "":"&l ...

  8. 使用intellij的svn时提示出错： Can't use Subversion command line client: svn.Errors found while svn working copies detection.

    使用Intellij的svn时提示出错:Can't use Subversion command line client: svn. Errors found while svn working co ...

  9. visio任意角度精确旋转图形

    visio 2013 步骤: 选中图形 点击"视图->显示->任务窗格->大小和位置" 然后会出现一个小窗口,里面可以输入图形的旋转角度

  10. Leetcode: Poor Pigs

    There are 1000 buckets, one and only one of them contains poison, the rest are filled with water. Th ...