一、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. Ubuntu使用ssh公钥实现免密码登录

    ssh 无密码登录要使用公钥与私钥.linux下可以用用ssh-keygen生成公钥/私钥对,下面我以Ubuntu为例. 有机器A(10.0.2.1),B(10.0.2.100).现想A通过ssh免密 ...

  2. JSP数据交互

    JSP数据交互   一.jsp中java小脚本 1.<% java代码段%> 2.<% =java表达式%>不能有分号 3.<%!成员变量和函数声明%>二.注释 1 ...

  3. 在命令行下使用perl

    http://blog.sina.com.cn/s/blog_4af3f0d20100g9oz.html aaa@domain.com  2aaa@domain.com 111bbb@home.com ...

  4. js中解析json对象：JSON.parse()用于从一个字符串中解析出json对象, JSON.stringify()用于从一个对象解析出字符串。

    JSON.parse()用于从一个字符串中解析出json对象. var str = '{"name":"huangxiaojian","age&quo ...

  5. jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据

    jQuery.ajax( options ) : 通过 HTTP 请求加载远程数据 这个是jQuery 的底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等. $.ajax() ...

  6. sed 引入shell变量

    双单引号即可 1.eval sed ’s/$a/$b/’ filename2.sed "s/$a/$b/" filename3.sed ’s/’$a’/’$b’/’ filenam ...

  7. Docker的容器

    容器是一个打包了应用和服务的环境,是一个轻量级的虚拟机,每一个容器都由一组特定的应用和必要的依赖库组成. 容器的管理操作 容器常见的命令:查看.创建.启动.终止和删除 创建容器 docker crea ...

  8. 如何使用JDBC链接数据库

    1.加载数据库驱动 不同的数据库加载的驱动不一样 Class.forName(com.MySQL.jdbc.Driver) Class.forName(oracle.jdbc.driver.Oracl ...

  9. Git 取消跟踪已版本控制的文件

    http://www.cnblogs.com/cposture/p/git.html 转: Git 是一个很好的版本控制工具,当然驾驭起来相比 SVN 要稍微复杂一些.初入 Git,难免有一些问题.比 ...

  10. XML的一些事

    XML文件的优缺点: 使用XML作为传输格式的优势: 1. 格式统一, 符合标准 2. 容易与其他系统进行远程交互, 数据共享比较方便 3.调用将 XML 用作传输的现有服务. 4.使用 XSLT 可 ...