font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

与unicode使用方式相比，具有如下特点：

  • 兼容性良好，支持ie8+，及所有现代浏览器。
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤：

1、登陆http://www.iconfont.cn或者百度iconfont 阿里巴巴矢量图 进入到我的项目（这里可以多人共享）

2、在我的项目中或者在我的购物车 “下载代码”

3、下载下来是个文件夹，将此文件夹放置项目下即可（此文件夹中有3个HTML文件，可用浏览器打开其中一个查看图标）

4、在项目中日引入  iconfont.css  即可

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

5、使用图标，一般通过<i>标签或者<span>标签引入相应的图标

<i class="icon iconfont icon-wenxintishi"></i>

iconfont 在项目中的简单使用的更多相关文章

  1. Jwt在Java项目中的简单实际应用

    1.什么是jwt 双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以Json对象的形式安全的传递信 ...

  2. 使用iconfont管理项目中的字体图标

    先来说说字体图标的好处: 很容易任意地缩放: 很容易地改变颜色: 很容易地产生阴影: 可以拥有透明效果: 一般来说,有先进的浏览器支持: 可以使用CSS来装饰(可以得到CSS很好支持): 可以快速转化 ...

  3. python JoinableQueue在生产者消费者项目中的简单应用

    class multiprocessing.JoinableQueue([maxsize]) JoinableQueue, a Queue subclass, is a queue which add ...

  4. Web项目中创建简单的错误处理页面

    当应用程序出现错误的时候,如果没有做错误页面处理的话,会直接输出一些敏感的信息出来,有时候甚至会直接将项目所在的物理路径给显示出来,严重缺乏安全性,并且错误种类繁多,页面风格不一,导致用户体验不好,本 ...

  5. Redis在SSM项目中的简单使用

    一.基于SSM的Redis环境配置 前提是你的开发电脑安装和配置好了redis,如果没安装请看Window配置Redis环境和简单使用 1.1.pom文件中引入redis客户端jar包(pom.xml ...

  6. Linux中ifreq 结构体分析和使用 及其在项目中的简单应用

    [基础知识说明] 结构原型: /* * Interface request structure used for socket * ioctl's.  All interface ioctl's mu ...

  7. redux在react项目中的应用

    今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...

  8. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

  9. vue项目中引入iconfont

    背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...

随机推荐

  1. python3.6.4的importlib模块重载用法

    了解:模块的重载 考虑到性能的原因,每个模块只被导入一次,放入字典sys.module中,如果你改变了模块的内容,你必须重启程序,python不支持重新加载或卸载之前导入的模块, 有的同学可能会想到直 ...

  2. CF869 E 二维BIT

    1代表建一个屏障,2代表去掉一个屏障,3询问是否两点相通. 仿造一维询问是否在同一区间的问题扩展到二维,树状数组维护区间标记即可,标记值可以直接2500进制不会爆LL. /** @Date : 201 ...

  3. Redis学习五：Redis的持久化-RDB

    RDB(Redis DataBase) 一.是什么 1.概念:在指定的时间间隔内将内存中的数据集快照写入磁盘,也就是行话讲的Snapshot快照,它恢复时是将快照文件直接读到内存里 2.执行方式: R ...

  4. nodejs 剪切图像在上传，并保存到指定路径下（./public/img/' + req.session.token + '.jpg‘）

    前jQuery端接收数据 function upAvatar(img){ console.log(img); // data:image/jpeg;base64,/9j/4AAQSkZJRgABAQA ...

  5. Javascript实现返回上一页面并刷新

    今天写了一个小小的提示成功的页面,同时要求返回上一页面,并实现对上一页面的操作进行刷新(例如删除的,添加的),在网上搜寻了一遍,基本上90%的都是说的是用window.history.go(-1), ...

  6. [NOI导刊2010提高&洛谷P1774]最接近神的人 题解（树状数组求逆序对）

    [NOI导刊2010提高&洛谷P1774]最接近神的人 Description 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某 ...

  7. 20165227 实验二《Java面向对象程序设计》实验报告

    2017-2018-4 20165227实验二<Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉 ...

  8. MySQL 5.7.17 Group Relication（组复制）搭建手册【转】

    本博文介绍了Group Replication的两种工作模式的架构.并详细介绍了Single-Master Mode的部署过程,以及如何切换到Multi-Master Mode.当然,文末给出了Gro ...

  9. 13 JSON-RPC: a tale of interfaces

    JSON-RPC: a tale of interfaces 27 April 2010 Here we present an example where Go's interfaces made i ...

  10. maven scope 'provided' 和 ‘compile’的区别

    解释 其实这个问题很简单. 对于scope=compile的情况(默认scope),也就是说这个项目在编译,测试,运行阶段都需要这个artifact(模块)对应的jar包在classpath中. 而对 ...