Iconfot阿里妈妈-css高级应用
矢量图标替换教程
搜索你分类的关键字---然后加入购物车
加入购物车之后,下载到本地用浏览器打开demo.html
把a class=“原来样式” 替换成 iconfont
要把下载到本地的demo 里面的 这四个文件传到对应的模板文件夹下。
然后对应文件夹下的style.css 打开找到
/*字体图标区域*/
@font-face {
font-family:fp-font;
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot);
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot?#iefix) format('embedded-opentype'), url(http://at.alicdn.com/t/font_1394079079_0406601.woff) format('woff'), url(http://at.alicdn.com/t/font_1394079078_8924356.ttf) format('truetype'), url(http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format('svg')
}
这一段代码 注释掉,如下
/*字体图标区域
@font-face {
font-family:fp-font;
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot);
src:url(http://at.alicdn.com/t/font_1394079079_0082858.eot?#iefix) format('embedded-opentype'), url(http://at.alicdn.com/t/font_1394079079_0406601.woff) format('woff'), url(http://at.alicdn.com/t/font_1394079078_8924356.ttf) format('truetype'), url(http://at.alicdn.com/t/font_1394079079_06411.svg#iconfont) format('svg')
}*/
然后在 style.css 最底部 添加 以下代码
@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('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale; padding-left:20px
}
这样就可以了刷新页面看效果了。
Iconfot阿里妈妈-css高级应用的更多相关文章
- zz阿里妈妈深度树检索技术(TDM)及应用框架的探索实践
分享嘉宾:何杰 阿里妈妈 高级算法专家 编辑整理:孙锴 内容来源:DataFun AI Talk 出品社区:DataFun 注:欢迎转载,转载请注明出处 导读:阿里妈妈是阿里巴巴集团旗下数字营销的大中 ...
- 阿里妈妈的iconfont的引用问题
一.先进官网 我们看到了上面的这些图标,是不是很心动,阿里妈妈就是给力,给马老师点赞,但是问题来了我们怎么去使用呢. 二.点击图标 嘿嘿,上面的操作步骤我就不多说了吧,我相信大家都会做的,接下来我们就 ...
- CSS高级知识
1.CSS变换 2.CSS动画 3.CSS高级特性及兼容性:http://caniuse.com/
- CSS 高级语法 ---- 继承和选择器的分组
1. 选择器的分组 ————————————————————————— 可以对选择器进行分组,被分组的选择器享用共同的声明. h1,h2,h3,h4,h5,h6 { color: green; ...
- iconfont阿里妈妈前端小图标使用方法详解
图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3. ...
- 阿里妈妈前端团队出品的开源接口管理工具RAP第二代 http://rap2.taobao.org
RAP2-DELOS 开源社区版本 (后端API服务器) 项目地址:https://github.com/thx/rap2-delos RAP2是在RAP1基础上重做的新项目,它包含两个组件(对应两个 ...
- css高级选择器&盒模型
css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...
- 阿里妈妈MLR模型(论文)
论文来源:https://arxiv.org/abs/1704.05194v1 阿里技术:https://mp.weixin.qq.com/s/MtnHYmPVoDAid9SNHnlzUw?scene ...
- 阿里妈妈Java后端 社招5面(Offer已拿)
最近由于个人原因, 由于前面两面的时间过去的有点久了,只能根据记忆大概写些记得问题. 阿里妈妈1面 40mins(2021-02-22) 1. 能简单介绍下自己和自己做的项目吗? 2. 关于项目的 ...
随机推荐
- struct sockaddr与struct sockaddr_in ,struct sockaddr_un的区别和联系
在linux环境下,结构体struct sockaddr在/usr/include/linux/socket.h中定义,具体如下:typedef unsigned short sa_family_t; ...
- uva 1611:Crane(构造 Grade D)
题目链接 题意: 一个序列,你可以选择其中偶数长度的一段,然后中间切开,左右两段交换.现给你一个1~n的某个排列,求一个交换方案,使得排列最终有序.(交换次数 < 9^6) 思路: 从左到右,依 ...
- 洛谷 P1014 Cantor表【蛇皮矩阵/找规律/模拟】
题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … ...
- JMeter特殊情况二:针对某些请求数据每次请求都是变化的情况
概要:某些post请求,例如,登录的请求除了有我们再页面上需要输入的一些值(用户名.密码.是否记住密码等)之外,还有其他的参数,例如token等等,而且这些参数不固定,也就是说每一次post请求这些参 ...
- Laravel 时间处理
$info['date'] = $item->created_at->diffForHumans();//友好时间显示 $info['date'] = $item->created_ ...
- linux 学习解决归档管理器打开rar和zip中文文件名乱码问题
在ubunut下打开windows下压缩的rar文件和zip压缩文件出现中文文件名乱码的问题真的很头疼.文件名乱码其实也没有什么关系是不?至少重命名再改回来或者是使用英文命名都可以克服.不巧的是,如此 ...
- mac下安装好sencha cmd后每次都需要输入source ~/.bash_profile
解决办法: 在终端输入vim ~/.zshrc加一句 source ~/.bash_profile
- JAVAWEB开发之JSP、EL、及会话技术(Cookie和Session)的使用详解
Servlet的缺点 开发人员要十分熟悉JAVA 不利于页面调试和维护(修改,重新编译) 很难利用网页设计工具进行页面设计(HTML内容导入到servlet中,用PrintWriter的对象进行输出) ...
- WPF文字渲染相关的问题及解决
wpf中常常遇到各种和文字渲染有关的问题. 如今列举下现象和解决方式. (1) 现象: 文字大小不一.不在同一水平线. 不同字渲染成同一个字, 或者字体发虚 原因:微软雅黑字体对中文字符的渲染支 ...
- 某音乐类App评论相关API的分析及SQL注入尝试
关键字:APIfen.工具使用.sql注入 涉及工具/包:Fiddler.Burpsuite.Js2Py.Closure Compiler.selenium.phantomjs.sqlmap 摘要: ...