一、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. /etc/sudoers文件损坏修复

    1. 重启(开机)时按Shift键(这时就会进入grub模式) 选择第二项 进入高级选项

  2. SSH配置中出现问题

    问题1:org.springframework.beans.factory.NoSuchBeanDefinitionException: org.springframework.beans.facto ...

  3. Full exploitation of a cluster hardware configuration requires some enhancements to a single-system operating system.

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Operating System Desi ...

  4. Spring @Autowired注解在utils静态工具类

    [转] 使用场景:在一个静态方法中,如何使用以下注入: @Autowired private ItemMapper itemMapper; @Component public class TestUt ...

  5. Nodejs：Path对象

    模块Path: path.normalize(url) path.join(url1, url2, ..) path.resolve(url1, url2, ..) path.relative(url ...

  6. SSD Trim Support -- 保护 SSD

    今天同事告诉我,换了 ssd 之后需要做以下配置能使 ssd 寿命更长.原理是配置系统定期清理和回收 ssd 的资源. 最终效果: 步骤: 1.下载 trim enabler: https://gis ...

  7. WPF 组合快捷键（Ctrl+C）

    页面程序: <Window x:Class="WpfDataGrid.Window1"        xmlns="http://schemas.microsoft ...

  8. 第三篇：白话tornado源码之请求来了

    上一篇<白话tornado源码之待请求阶段>中介绍了tornado框架在客户端请求之前所做的准备(下图1.2部分),本质上就是创建了一个socket服务端,并进行了IP和端口的绑定,但是未 ...

  9. 基于 debootstrap 和 busybox 构建 mini ubuntu

    基于 debootstrap 和 busybox 构建 mini ubuntu 最近的工作涉及到服务器自动安装和网络部署操作系统,然后使用 ansible 和 saltsatck 进行配置并安装 op ...

  10. Python之路-python(mysql介绍和安装、pymysql、ORM sqlachemy)

    本节内容 1.数据库介绍 2.mysql管理 3.mysql数据类型 4.常用mysql命令 创建数据库 外键 增删改查表 5.事务 6.索引 7.python 操作mysql 8.ORM sqlac ...