一、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. 贪吃蛇的java代码分析（一）

    自我审视 最近自己学习java已经有了一个多月的时间,从一开始对变量常量的概念一无所知,到现在能勉强写几个小程序玩玩,已经有了长足的进步.今天没有去学习,学校里要进行毕业答辩和拍毕业照了,于是请了几天 ...

  2. pyspider 安装时 Could not run curl-config

    sudo aptitude install libcurl4-openssl-dev

  3. JavaScript的3大组成部分&&ECMAScript函数&&闭包

    1.JavaScript实现是由ECMAScript.DOM和BOM组成.a.ECMAScript仅仅是一个描述,定义了脚本语言的所有属性.方法和对象.b.DOM[文档对象模型]是HTML和XML的应 ...

  4. Intellij 常用技巧-持续更新

    1.快速输入 System.out.println(); sout [TAB] 2.删除Module ctrl+alt+shift+s 调出  Project Structure ,也可点击菜单Fil ...

  5. Java 实现函数回调

    在Java里没用委托(delegate)这方法,所以想要实现回调还是有些麻烦.(想了解C#如何实现?请查看:http://www.cnblogs.com/Martin_Q/p/4478494.html ...

  6. Centos6.5 python2.7连接mysql数据库

    1.环境是centos6.5 32位系统,python版本是2.7.12,mysql版本是5.5.22.准备好所需压缩包,MySQL-python-1.2.4b4.tar.gz  pip-6.0.7. ...

  7. LoadRunner连接Genymotion

  8. web前端基础知识 - Django进阶

    1. 路由系统 1.1 单一路由对应 url(r'^index$', views.index), 1.2 基于正则的路由 url(r'^index/(\d*)', views.index), url( ...

  9. echarts 图表应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Windows Phone 三、样式和资源

    定义样式和引用资源 <Page.Resources> <!-- 向资源字典中添加一个键为ButtonBackground值为SolidColorBrush对象 --> < ...