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. bzoj千题计划123：bzoj1027: [JSOI2007]合金

    http://www.lydsy.com/JudgeOnline/problem.php?id=1027 因为x+y+z=1,所以z=1-x-y 第三维可以忽略 将x,y 看做 平面上的点 简化问题: ...

  2. JavaScript 运行机制之执行顺序详解

    JavaScript是一种描述型脚本语言,它不同于 Java 或 C# 等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解 JavaScript 语言的运行机制 ...

  3. 纯javascript代码实现浏览器图片选择预览、旋转、批量上传

    工作中遇到的业务场景,和同事一起研究了下,主要是为了兼容IE版本 其实就是一些琐碎的知识点在网上搜集下解决方式,然后集成了下,主要有以下点: 1. IE input type=file的图片预览要用I ...

  4. 【leetcode 简单】 第一百四十六题 最长和谐子序列

    和谐数组是指一个数组里元素的最大值和最小值之间的差别正好是1. 现在,给定一个整数数组,你需要在所有可能的子序列中找到最长的和谐子序列的长度. 示例 1: 输入: [1,3,2,2,5,2,3,7] ...

  5. webrtc前景如何

    首先WebRTC是什么? WebRTC --- Web browsers with Real-Time Communications (RTC). WebRTC是一个免费.开放的项目.使web浏览器通 ...

  6. AAC编码

    1. 前言 如果说目前H.264是视频CODEC的实际霸主,那么AAC就是音频CODEC的女王.主流的音视频格式都是H.264搭配AAC,无论是非实时的媒体文件还是实时的媒体流. 2. AAC历史 A ...

  7. 工具推荐：ATSCAN，功能强大的Perl脚本扫描器

    工具推荐:ATSCAN,功能强大的Perl脚本扫描器 使用perl语言编写的开源的扫描器,功能丰富强大,除了基本的tcp和udp端口扫描之外,还可以搜索wordpress.joomla等网站并进行口令 ...

  8. 连接数据库及出现System.AccessViolationException错误的解决方法

    调试后发现, connection.Open();以后报错,System.AccessViolationException: 尝试读取或写入受保护的内存.这通常指示其他内存已损坏,网上搜了很多都没有作 ...

  9. 嵌入式Linux截图工具gsnap移植与分析【转】

    转自:http://blog.csdn.net/lu_embedded/article/details/53934184 版权声明:开心源自分享,快乐源于生活 —— 分享技术,传递快乐.转载文章请注明 ...

  10. 【写在NOIP前】

    快NOIP了,感觉自己得总结一下吧. 1.要自信啊,相信自己啊,我明明还是有些实力的是吧. 哪怕之前被教练怎么怼,自己别放弃啊 一定要注意心态吧,考试的时候怎么都不能慌,你不会的题也不会有多少人会做的 ...