一、解释一下为什么要使用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. Dlib笔记一:基本数据结构和基本操作

    编译了Dlib之后就开始想着怎么用起来,先从基本的数据类型说起吧,因为是图像,所以难免会跟OpenCV的数据类型比较.在Dlib中,图像是用二维阵列(array2d)或者矩阵(matrix)来表示的, ...

  2. Angular表单 (一)表单简介

    Angular 表单 angular提供了两种不同的方法来通过表单处理用户输入:响应式表单和模板驱动表单.二者都从视图中捕获用户输入事件.验证用户输入.创建表单模型.修改数据模型,并提供跟踪这些更改的 ...

  3. php对象:__autoload()函数及单入口文件,__set(), __get(), get_class_methods(),get_class_vars()

    __autoload():当类中找不到相关类的时候,会自动执行__autoload()函数,可以自动加载相关文件 __set() : 当对类的私有变量进行调用赋值时,自动调用该方法.  __get() ...

  4. 深入JVM(一)JVM指令手册

    本文按照如下思维导图组织 1. 栈和局部变量操作 1.1 将常量压入栈的指令 aconst_null 将null对象引用压入栈iconst_m1 将int类型常量-1压入栈iconst_0 将int类 ...

  5. E - Apple Tree POJ - 2486

    E - Apple Tree POJ - 2486 Wshxzt is a lovely girl. She likes apple very much. One day HX takes her t ...

  6. JavaScript—瀑布流

    现在网页中需要翻页的列表,好多都已经改为瀑布流了.所以这个思路还是特别重要的 HTML Css 页面 因为每个图片的高度不一样所以她的 top 和left 我们待会通过JS计算 动态生成 js部分 思 ...

  7. Python说文解字_defaultdict

    1. 这个构造函数需要一个函数作为参数,每当访问一个字典中不存在的键时,将会不带参数的调用这个函数,并将结果设定为默认值. 2. 众所周期,如果访问字典中不存在的键时,会引发KeyError异常. 其 ...

  8. Git&GitHub 基本使用

    如果是Windows用户需要自行去Git的官网下载Git工具 相信以您的聪明才知不需要一会就可以安装好Git工具了 博主这里是MacOS系统,本省就自带Git工具就不演示安装了 在完成一个简单的Git ...

  9. 提示Asp.net4.5未在web服务器上注册

    在用vs2012代开项目时, 每回都显示Asp.net4.5未在web服务器上注册,最后是由于没有下载一个补丁的原因,只需要下载安装补丁 VS11-KB3002339.exe ,下载地址:https: ...

  10. Mac中制作USB系统启动盘

    .iso镜像文件转 .dmg文件 hdiutil convert -format UDRW -o linuxmint.dmg ~/Desktop/linuxmint-19-cinnamon-64bit ...