矢量图标替换教程

首先进入:http://www.iconfont.cn/

搜索你分类的关键字---然后加入购物车

加入购物车之后,下载到本地用浏览器打开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高级应用的更多相关文章

  1. zz阿里妈妈深度树检索技术(TDM)及应用框架的探索实践

    分享嘉宾:何杰 阿里妈妈 高级算法专家 编辑整理:孙锴 内容来源:DataFun AI Talk 出品社区:DataFun 注:欢迎转载,转载请注明出处 导读:阿里妈妈是阿里巴巴集团旗下数字营销的大中 ...

  2. 阿里妈妈的iconfont的引用问题

    一.先进官网 我们看到了上面的这些图标,是不是很心动,阿里妈妈就是给力,给马老师点赞,但是问题来了我们怎么去使用呢. 二.点击图标 嘿嘿,上面的操作步骤我就不多说了吧,我相信大家都会做的,接下来我们就 ...

  3. CSS高级知识

    1.CSS变换 2.CSS动画 3.CSS高级特性及兼容性:http://caniuse.com/

  4. CSS 高级语法 ---- 继承和选择器的分组

    1. 选择器的分组 —————————————————————————   可以对选择器进行分组,被分组的选择器享用共同的声明.   h1,h2,h3,h4,h5,h6 { color: green; ...

  5. iconfont阿里妈妈前端小图标使用方法详解

    图标选购网址:http://www.iconfont.cn/ 1.从阿里妈妈网站选购好小图标,加入购物车,下载好文件: 2.把字体文件放入字体(font)文件夹(tff)(woff),(eot) 3. ...

  6. 阿里妈妈前端团队出品的开源接口管理工具RAP第二代 http://rap2.taobao.org

    RAP2-DELOS 开源社区版本 (后端API服务器) 项目地址:https://github.com/thx/rap2-delos RAP2是在RAP1基础上重做的新项目,它包含两个组件(对应两个 ...

  7. css高级选择器&盒模型

    css高级选择器&盒模型 1.组合选择器 群组选择器 /* 每个选择器为可以为三种基础选择器的任意一个,用逗号隔开,控制多个*/ div,.div,#div{ color:red } 后代(子 ...

  8. 阿里妈妈MLR模型(论文)

    论文来源:https://arxiv.org/abs/1704.05194v1 阿里技术:https://mp.weixin.qq.com/s/MtnHYmPVoDAid9SNHnlzUw?scene ...

  9. 阿里妈妈Java后端 社招5面(Offer已拿)

    最近由于个人原因, 由于前面两面的时间过去的有点久了,只能根据记忆大概写些记得问题.   阿里妈妈1面 40mins(2021-02-22) 1. 能简单介绍下自己和自己做的项目吗? 2. 关于项目的 ...

随机推荐

  1. struct sockaddr与struct sockaddr_in ,struct sockaddr_un的区别和联系

    在linux环境下,结构体struct sockaddr在/usr/include/linux/socket.h中定义,具体如下:typedef unsigned short sa_family_t; ...

  2. uva 1611:Crane(构造 Grade D)

    题目链接 题意: 一个序列,你可以选择其中偶数长度的一段,然后中间切开,左右两段交换.现给你一个1~n的某个排列,求一个交换方案,使得排列最终有序.(交换次数 < 9^6) 思路: 从左到右,依 ...

  3. 洛谷 P1014 Cantor表【蛇皮矩阵/找规律/模拟】

    题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … ...

  4. JMeter特殊情况二:针对某些请求数据每次请求都是变化的情况

    概要:某些post请求,例如,登录的请求除了有我们再页面上需要输入的一些值(用户名.密码.是否记住密码等)之外,还有其他的参数,例如token等等,而且这些参数不固定,也就是说每一次post请求这些参 ...

  5. Laravel 时间处理

    $info['date'] = $item->created_at->diffForHumans();//友好时间显示 $info['date'] = $item->created_ ...

  6. linux 学习解决归档管理器打开rar和zip中文文件名乱码问题

    在ubunut下打开windows下压缩的rar文件和zip压缩文件出现中文文件名乱码的问题真的很头疼.文件名乱码其实也没有什么关系是不?至少重命名再改回来或者是使用英文命名都可以克服.不巧的是,如此 ...

  7. mac下安装好sencha cmd后每次都需要输入source ~/.bash_profile

    解决办法: 在终端输入vim ~/.zshrc加一句 source ~/.bash_profile

  8. JAVAWEB开发之JSP、EL、及会话技术(Cookie和Session)的使用详解

    Servlet的缺点 开发人员要十分熟悉JAVA 不利于页面调试和维护(修改,重新编译) 很难利用网页设计工具进行页面设计(HTML内容导入到servlet中,用PrintWriter的对象进行输出) ...

  9. WPF文字渲染相关的问题及解决

     wpf中常常遇到各种和文字渲染有关的问题. 如今列举下现象和解决方式. (1) 现象: 文字大小不一.不在同一水平线. 不同字渲染成同一个字, 或者字体发虚 原因:微软雅黑字体对中文字符的渲染支 ...

  10. 某音乐类App评论相关API的分析及SQL注入尝试

    关键字:APIfen.工具使用.sql注入 涉及工具/包:Fiddler.Burpsuite.Js2Py.Closure Compiler.selenium.phantomjs.sqlmap 摘要: ...