iconfont 在项目中的简单使用
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 在项目中的简单使用的更多相关文章
- Jwt在Java项目中的简单实际应用
1.什么是jwt 双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以Json对象的形式安全的传递信 ...
- 使用iconfont管理项目中的字体图标
先来说说字体图标的好处: 很容易任意地缩放: 很容易地改变颜色: 很容易地产生阴影: 可以拥有透明效果: 一般来说,有先进的浏览器支持: 可以使用CSS来装饰(可以得到CSS很好支持): 可以快速转化 ...
- python JoinableQueue在生产者消费者项目中的简单应用
class multiprocessing.JoinableQueue([maxsize]) JoinableQueue, a Queue subclass, is a queue which add ...
- Web项目中创建简单的错误处理页面
当应用程序出现错误的时候,如果没有做错误页面处理的话,会直接输出一些敏感的信息出来,有时候甚至会直接将项目所在的物理路径给显示出来,严重缺乏安全性,并且错误种类繁多,页面风格不一,导致用户体验不好,本 ...
- Redis在SSM项目中的简单使用
一.基于SSM的Redis环境配置 前提是你的开发电脑安装和配置好了redis,如果没安装请看Window配置Redis环境和简单使用 1.1.pom文件中引入redis客户端jar包(pom.xml ...
- Linux中ifreq 结构体分析和使用 及其在项目中的简单应用
[基础知识说明] 结构原型: /* * Interface request structure used for socket * ioctl's. All interface ioctl's mu ...
- redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
- vue项目中引入iconfont
背景 对于前端而言,图标的发展可谓日新月异.从img标签,到雪碧图,再到字体图标,svg,甚至svg也有了类似于雪碧图的方案svg-sprite-loader.雪碧图没有什么好讲的了,只是简单地利用了 ...
随机推荐
- Android studio 使用flutter插件 运行第一个flutter项目 报错 Warning: License for package Android SDK Build-Tools 28.0.3 not accepted.
在Android studio中新建了flutter项目.运行报错licence not accepted. Warning: License for package Android SDK Buil ...
- 全链路追踪traceId,ThreadLocal与ExecutorService
关于全链路追踪traceId遇到线程池的问题,做过架构的估计都遇到过,现在以写个demo,总体思想就是获取父线程traceId,给子线程,子线程用完移除掉. mac上的chrome时不时崩溃,写了一大 ...
- Spring Aware容器感知技术
Spring Aware是什么 Spring提供Aware接口能让Bean感知Spring容器的存在,即让Bean可以使用Spring容器所提供的资源. Spring Aware的分类 几种常用的Aw ...
- 20155222 2016-2017-2 《Java程序设计》第7周学习总结
20155222 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 使用基于方法的语法在 Enumerable 类中调用 Where 方法时(像在 LINQ t ...
- 图片压缩之 PNG
作者:程志达链接:https://zhuanlan.zhihu.com/p/19570424来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. PNG(Portable N ...
- Git的安装和使用(Linux)【转】
转自:http://my.oschina.net/fhd/blog/354685 Git诞生于Linux平台并作为版本控制系统率先服务于Linux内核,因此在Linux上安装Git是非常方便的.可以通 ...
- Tomcat的JVM设置和连接数设置
Windows环境下修改“%TOMCAT_HOME%\bin\catalina.bat”文件,在文件开头增加如下设置:set JAVA_OPTS=-Xms256m -Xmx512m Linux环境下修 ...
- Team Foundation Server 2010服务器安装
本安装指南使用Windows Server 2008企业版为基础,安装Windows Server 2008 SP2(必须),在此操作系统环境上进行TFS2010的安装与配置. 三.系统用户设置 1. ...
- [HBase]mem store flusher 流程
- poj1976
dp #include <cstdio> #include <cstring> #include <algorithm> using namespace std; ...