一、解释一下为什么要使用IconFont?

IconFont顾名思义就是把图标用字体的方式呈现。

其优点在于以下几个方面:

1.可以通过css的样式改变其颜色;(最霸气的理由)

2.相对于图片来说,具有更高的分辨率

3.更小的存储

缺点:浏览器兼容性不够普及,所幸,大部分主流浏览器都支持

二、阿里巴巴IconFont要怎么使用

1.当然是先下载(上传图片太麻烦,大家多包容哈)

》登录:http://www.iconfont.cn/

》点击图标库,搜索购物车,便可以看到一系列购物车图标。

》选择自己喜欢的图标,加入购物车
》选择完成后,点开购物车,点击下载代码
2.如何应用到代码(这部分可以来几张图片)
打开上述三个页面,就是运用IconFont的3种使用方法(建立一个font文件放置相应的文件)
(1)Unicode(兼容性最好,不支持多色),需拷贝下面几个文件
(2)symbol引用,需导入iconfont.js文件
(3)font-class引用,需导入iconfont.css文件
具体的代码步骤,3个html都讲述得很清楚,我就不多说了。
结语:哈!我很感谢那些写博客的大神。虽然我不是一个大神,但是还是希望可以通过自己的微薄之力帮助一些像我一个需要指导的人。
互联网是给这个世界最大的惊喜。
 
 

阿里巴巴IconFont的使用方式的更多相关文章

  1. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  2. 阿里巴巴iconfont使用方式

    IconFont的作用就是用字体的格式来取代图片.特殊字体的展示,用得比较多的就是一些纯色的图标,具体主要由当前css3属性里的自定义字体(@font-face)来实现. 1.首先在Iconfont- ...

  3. 关于阿里巴巴iconfont的使用方法

    iconfont网址:http://www.iconfont.cn/ 说起iconfont,做前端开发的应该知道它的好处,图标库之丰富,只有你想不到的,没有你找不到的,而且轻量高清.用户在iconfo ...

  4. 如何使用阿里巴巴iconfont矢量图片

    ①打开此网站http://www.iconfont.cn/ , 选择需要的几个图形 → 加入购物车 → 添加至项目 → 给项目随便命名 → 点击电线连接并点击代码 → 复制代码到css ②在body里 ...

  5. 微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)

    前提 需要安装好 nodejs (略) 用于下载插件 安装插件 npm install mini-program-iconfont-cli --save-dev 初始化配置文件 npx iconfon ...

  6. 【转】Android应用开发之PNG、IconFont、SVG图标资源优化详解

    1 背景 最近因为一些个人私事导致好久没写博客了,多事之年总算要过去了,突然没了动力,所以赶紧先拿个最近项目中重构的一个小知识点充下数,老题重谈. 在我们App开发中大家可能都会有过如下痛疾(程序员和 ...

  7. Iconfont技术

    什么是 IconFont 顾名思义,IconFont 就是字体图标.严格地说,就是一种字体,但是,它们不包含字母或数字,而是包含符号和字形.您可以使用 CSS 设置样式,就像设置常规文本一样,这使得 ...

  8. 聊聊Iconfont

    一.前言 说起Iconfont,对大多数人来说可能不是什么新的技术了,现在好多大网站已经开始使用Iconfont.博主今天主要是简单说一下它的使用方法,聊聊使用它时可能遇到哪些坑,不熟悉的同学可以简要 ...

  9. 关于iconfont字体图标的使用

    今天用iconfont遇到了字体图标的使用问题.关于使用字体图标的方式在这里有介绍三种方式(css和js的引入和平时一样) 首先你要分清是用单个字体图标icon,还是多个字体图标icon 关于使用代码 ...

随机推荐

  1. wepy 小程序定时器(验证码倒计时) 数据绑定页面无刷新

    每次改变数据的时候记得调用  this.$apply() 验证码倒计时 使用的vant-weapp  UI组件 wxml: <van-col span="10" style= ...

  2. SQL Server 2017 安装问题

    遇到问题 Polybase 要求安装 Oracle JRE7 更新 规则失败 安装完毕之后,登录提示:您试图连接的 SQL Server 实例未安装 安装完SQL Server 2017 后,无法启动 ...

  3. ubuntu 18.04 安装 Redis-server

    Redis 安装 Redis是一款内存键值存储,以其灵活性,性能和广泛的语言支持而闻名.本教程将演示如何在Ubuntu 18.04服务器上安装和配置Redis.主要内容包括: 安装 Redis Red ...

  4. 高级变量类型(列表,元组,字典,字符串,公共方法,变量高级)for循环

    Python 中数据类型可以分为 数字型 和 非数字型 数字型 整型 (int) 浮点型(float) 布尔型(bool) 真 True 非 0 数 -- 非零即真 假 False 0 复数型 (co ...

  5. dp--悬线dp P4147 玉蟾宫

    题目背景 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. 题目描述 这片土地被分成N*M个格子,每个格子里写着'R'或者'F ...

  6. 实验吧web-易-Forms

    打开网页,查看源码, 第二行,showsource的value是0,我们在查看器中将showsource的value值改为1,然后随便输入一个数,可以看到页面出现 意思就是我们输入的PIN的值应该是代 ...

  7. 吴裕雄--天生自然 JAVASCRIPT开发学习: HTML DOM - 改变CSS

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. SQL基础教程(第2版)第4章 数据更新:4-1 数据的插入(INSERT)

    第4章 数据更新:4-1 数据的插入(INSERT) ● 将列名和值用逗号隔开,分别括在()内,这种形式称为清单.● 对表中所有列进行INSERT操作时可以省略表名后的列清单.● 插入NULL时需要在 ...

  9. C/C++源程序到可执行程序的过程

    源程序.cpp  预处理得到 预处理文件.i   编译得到 汇编文件.S    汇编得到 目标文件.o     链接得到 可执行文件 例子:main.cpp  fun.cpp fun.h #inclu ...

  10. keras_yolo3阅读

    源码地址 https://github.com/qqwweee/keras-yolo3 春节期间仔细看了看yolov3的kears源码,这个源码毕竟不是作者写的,有点寒酸,可能大道至简也是这么个理.我 ...