1、注册账号登陆

2、创建项目

3、搜索想使用的图标，添加入库，或者上传自己的图标入库

4、在图标库中，将添加的图标加入项目

5、将项目图标下载至本地

6、下载文件为

包括三种格式，使用方法不同

  • Unicode
  • Font class
  • Symbol

7、将文件引入页面开始使用，引入iconfot.css,  如果图标是多色的，那么就需要引入iconfont.js文件

代码实现，css

    <link rel="stylesheet" href="font/iconfont.css">

    <style>

        @font-face {

            font-family: 'iconfont';

            src: url('iconfont.eot');

            src: url('iconfont.eot?#iefix') format('embedded-opentype'),

                url('iconfont.woff2') format('woff2'),

                url('iconfont.woff') format('woff'),

                url('iconfont.ttf') format('truetype'),

                url('iconfont.svg#iconfont') format('svg');

        }

        .iconfont {

            font-family: "iconfont" !important;

            font-size: 32px;

            font-style: normal;

            -webkit-font-smoothing: antialiased;

            -moz-osx-font-smoothing: grayscale;

        }

    </style>

html

<body>

    <span class="iconfont"></span>

    <span class="iconfont"></span>

    <span class="iconfont"></span>

    <span class="iconfont"></span>

    <span class="iconfont"></span>

    <span class="iconfont"></span>

    <span class="iconfont"></span>

    <span class="iconfont"></span>

</body>

效果图

大功告成

阿里图标库使用IconFont的更多相关文章

  1. 关于阿里图标库Iconfont生成图标的三种使用方式（fontclass/unicode/symbol）

    1.附阿里图标库链接:http://www.iconfont.cn/ 2.登录阿里图标库以后,搜索我们需要的图标,将其加入购物车,如图3.将我们需要的图标全部挑选完毕以后,点击购物车图标4.这时候右侧 ...

  2. 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  3. 小程序中使用阿里图标库iconfont

    小程序中使用阿里图标库iconfont 项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一 ...

  4. 开发辅助 | 阿里图标库iconfont入门使用

    目前大多数的互联网公司,前端开发和UI设计师配合中,针对设计师给图的效果图,前端开发工程师不再像往常一样对于细小图标进行切图,取而代之的是引用阿里图标库(http://iconfont.cn/):简单 ...

  5. 【vue.js】vue项目使用Iconfont（阿里图标库）

    vue项目使用Iconfont(阿里图标库) 2019-11-12  19:07:02  by冲冲 1.操作步骤 ① 登录阿里巴巴矢量图标库 https://www.iconfont.cn ,注册账号 ...

  6. VUE 引入阿里图标库

    本身项目是VUE, Element-UI项目, 所以内置Element-UI图标库 地址如下, https://element.eleme.cn/#/zh-CN/component/icon 使用时: ...

  7. 在vue项目中引入阿里图标库小记

    使用Vue技术栈开发不仅效率高,而且很友好,而且还有很多基于vue的UI框架,例如:element等,但是这类框架美中不足的是,图标太少.为了解决这个问题,不得不引入第三方字体库,今天以阿里图标库为例 ...

  8. flutter 引入第三方 Icon 图标（以阿里图标库为例)

    在fluttter中引入第三方图标库的具体方法: 1.在阿里图标库选好需要用的图标,添加进购物车将选好的图标打包下载到本地(下载代码),复制iconfont.ttf文件到项目中 2.存放途径:lib/ ...

  9. Vue、Element-ui项目中如何使用Iconfont(阿里图标库)

    我们使用element-ui.vue开发网站的时候,往往图标是起着很重要的作用. 下面是vue.element-ui项目,如何使用阿里iconfont图标库的方法. 准备工作 1. 先注册,再登录.找 ...

随机推荐

  1. Java中变量之局部变量、本类成员变量、父类成员变量的访问方法

    变量:局部变量.本类成员变量.父类成员变量 如何访问:如果变量名相同,则采用就近原则,哪个变量离所要调用的访问最近,那就么就输出,优先顺序为:局部变量 > 本类成员变量 > 父类成员变量 ...

  2. 简单实用的jQuery分页插件

    在做商城和订单管理的时候,常常会用到分页功能,所以我封装了一个jQuery的分页插件,该插件主要实现上下翻页,输入数字跳转等功能. 具体实现如下: 输入参数需要当前页码pageNo,总页码totalP ...

  3. 读懂SAP Leonardo物联网平台

    读懂SAP Leonardo物联网平台 https://blog.csdn.net/weixin_42137700/article/details/81903290 本文比较系统.全面地介绍了SAP ...

  4. vue axios 与 FormData 结合 提交文件 上传文件

    ---再利用Vue.axios.FormData做上传文件时,遇到一个问题,后台虽然接收到请求,但是将文件类型识别成了字符串,所以,web端一直报500,结果是自己大意了. 1.因为使用了new  F ...

  5. 利用webpack搭建的前端工程化环境

    随着webpack3.x的发布,其功能也越来越强大,很多的项目的编译打包工具也由gulp逐渐转移到webpack.最近因为项目重构考虑使用使用vue,同时想从原来的gulp切换到webpack,所以搭 ...

  6. Linux下mysql5.7数据库root登录的问题

    本文最后修改时间:20180313 root默认为空密码,默认远程无法登录. mysql5.7更新了user表,网上的方法试了很多,都有点问题 #先停止MySQL服务 $ sudo service m ...

  7. C#微信公众号开发——获取access_token

    access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.正常情况下access_token有效期为7200秒(两个小时),微信获取access_token接 ...

  8. django 简单路由配置

    Django==2.0.1 版本路由配置: 1.在manage.py同级目录下新建一个应用app1 在app1下新建urls.py文件,定义一个app1的空白路由: from django.urls ...

  9. rows的参数

    ds.Tables[0].Rows[0][0].ToString()中的rows后边的那俩参数分别代表什么 第一个0表示行的索引(如果是0就表示第一行,1表示第二行……)第二个0表示列的索引(如果是0 ...

  10. 阿里八八β阶段Scrum（3/5）

    今日进度 叶文滔: 添加了侧边栏调用数据库用户名的功能,因为对Navigation View的不熟悉,走了很多弯路,尝试了三种方法才成功调用. 俞鋆: 研究了几个图像识别的api,最终决定使用ocr. ...