一、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. JSON 与 JSONP

    JSON (JavaScript Object Notation) is a lightweight data-interchange format. 即 JSON 是一种轻量级的数据交换格式. 1. ...

  2. hibernate学习(9)——日志，一对一，二级缓存

    1.Hibernate中的日志 1  slf4j 核心jar  : slf4j-api-1.6.1.jar .slf4j是日志框架,将其他优秀的日志第三方进行整合. 整合导入jar包 log4j 核心 ...

  3. 用css实现网站切角效果 使用css3属性:渐变

     都是大量的练习,老师练习乒乓球花了大量时间,十万次一个动作的重复,高中班主任说过,世上没有天才,只是重复的次数多了,自然被认作了天才,小小班的学生之所以厉害是因为他们重复一个知识点次数多,所以没有一 ...

  4. 《Linux及安全》实践3.2

    Login程序破解 一.掌握基本的汇编指令机器码 nop=空指令( 机器码90) JNE = 如果不相等就跳转机器码75) JE = 如果相等就跳转机器码74) JMP = 无条件跳转机器码EB) C ...

  5. 《Linux内核设计与实现》CHAPTER17阅读梳理

    <Linux内核设计与实现>CHAPTER17阅读梳理 [学习时间:3.5hours] [学习内容:设备类型,模块,内核对象,sysfs] 个人思考部分见[]标出的部分 一.课堂讲解整理& ...

  6. Go语言的GOPATH与工作目录详解

    这篇文章主要介绍了Go语言的GOPATH与工作目录详解,本文详细讲解了GOPATH设置.应用目录结构.编译应用等内容,需要的朋友可以参考下 GOPATH设置 go 命令依赖一个重要的环境变量:$GOP ...

  7. AngularJS基础知识1

    一.angularJS简介 1.什么是 AngularJS? AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.AngularJS是协助搭建单页面工程 ...

  8. iOS 将一串字符里面的某个字符全部标志出来

    NSMutableString * mutStr = [NSMutableString stringWithString:@"aaabbbbaaaccc"]; NSString * ...

  9. 在centos6.7用yum安装redis解决办法

    1. centos默认的安装源在官方centos.org上,而Redis在第三方的yum源里,所以无法安装,非官方的yum推荐用fedora的epel仓库 [root@localhost instal ...

  10. jsp页面常用控件

    1.点击按钮返回 上一页: <input type="submit" value="返回" onclick="javascript :histo ...