【CSS】iconfont的使用】的更多相关文章

前言 项目开发中,是避免不了使用小图标的,那么国内比较好用的图标网站当属iconfont了,下面我们将详细介绍如何使用. iconfont选择所需图标 1.iconfont官网 2.把所需要的添加进入购物车 3.添加所需图标完毕后,点击右上角的购物车图标 4.下载代码 5.下载的代码解压后 图片上圈起来的都是字体文件 6.项目中新建一个font文件夹用来放置字体文件 7.取出iconfont.css文件放入css文件夹 8.打开iconfont.css文件,配置正确的字体文件路径 // 这里要根…
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceController.js”文件内. /** * Created by MingChen on 2016/11/3. */ function sourceController() { this.root = ""; this.callfunc = null; // 回调函数 this.css = [];…
1.打开http://www.iconfont.cn官网,搜索你想要的图标.添加字体图标到购物车,点击购物车然后添加至项目,点击确定 2.点击图标管理/我的项目,找到对应的文件,点击Unicode,然后生成在线链接 3.新建iconfont.css文件,把在线生成的代码粘贴复制进去即可 4.定义使用iconfont样式,把下面代码复制到iconfont.css里面 .iconfont{ font-family:"iconfont" !important; font-size:16px;…
第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); /* IE9*/src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff') format('woff'), /* chrome.firefox */url('iconfont.ttf') format('tr…
原文:iconfont的引入方法   第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); /* IE9*/src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff') format('woff'), /* chrome.firefox */url('iconfo…
1.首先,进入阿里的矢量图标库,在这个图标库里面可以找到很多图片资源,当然了需要登录才能下载或者使用,用GitHub账号或者新浪微博账号登录都可以 2.登录以后,可以搜索自己需要的资源,然后直接下载使用,或者建立图标库然后再使用,例如这里以删除的图标为例 a) 搜索删除图标 b) 选择需要的图标,然后可以执行三种操作:添加入库.收藏或者直接下载,可以根据自己的实际情况来选择相应操作,这里选择添加入库,操作完可以看到图标已经添加进右上角的购物车里了 c) 点击右上角的购物车,可以看到如下页面,这里…
效果: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Flipping Effect</title> <link rel="stylesheet" type="text/css" href="css/iconfont.css"/> <style t…
1.浏览器前缀 浏览器厂商以前就一直在实时CSS3,但它还未成为真正的标准.为此,当有一些CSS3样式与法还在波动的时候,他们提出了针对不同浏览器的前缀,来解决兼容性问题. 即:CSS3去兼容不同的浏览器,针对旧的浏览器做兼容,新浏览器基本不需要添加这个前缀了. 浏览器 内核 前缀 IE Trident -ms- Firefox Gecko -moz- Opera Presto -o- Chrome Webkit -webkit- Safari Webkit -webkit- Opera.Chr…
一.效果 二.具体实现 1.index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="./css/style.css" /> <link rel="stylesheet" href="css/iconfont.css&qu…
字体图标库的使用 这是之前留下的博客,由于一堆博客没写完,本周周末做了个补充,可能内容上会有点不太斜街,请见谅... 本文大部分内容是自己结合过往经验探索总结的字体图标维护方式 iconfont-阿里矢量图标库 登录/注册 打开阿里矢量图标库地址:https://www.iconfont.cn/home/index,并使用 github 账号注册/登录 搜集需要的图标 选中菜单的图标库,然后点击页面右侧的红色搜索按钮 如下图是我搜索 地图 出来的图标库列表 在首页搜索你想要的图标(中英文都 ok…