第一步：使用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('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
第二步：定义使用iconfont的样式
<pre>
.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;}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont"></i>

代码HTML

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>icon</title>

    <link rel="stylesheet" href="css/iconfont.css">

</head>

<style>

    i:nth-of-type(1){

        font-size: 100px;

        color: #333;

    }

    i:nth-of-type(2){

        font-size: 200px;

        color: #1a1a1a;

        line-height: 300px;

    }

</style>

<body>

    <i class="iconfont">󰂥</i>

    <i class="iconfont"></i>

    <i class="iconfont"></i>

    <i class="iconfont"></i>

</body>

</html>

css

@font-face {font-family: "iconfont";

  src: url('iconfont.eot?t=1471336647'); /* IE9*/

  src: url('iconfont.eot?t=1471336647#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('iconfont.woff?t=1471336647') format('woff'), /* chrome, firefox */

  url('iconfont.ttf?t=1471336647') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

  url('iconfont.svg?t=1471336647#iconfont') 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;

}

.icon-nav:before { content: "\f00a5"; }

.icon-nav1:before { content: "\e601"; }

.icon-nav2:before { content: "\e608"; }

.icon-nav3:before { content: "\e6bf"; }

.icon-nav4:before { content: "\e659"; }

　　字体下载之后放在css文件下面

iconfont的引入方法的更多相关文章

  1. 阿里iconfont引入方法

    原文:iconfont的引入方法   第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); ...

  2. CSS基础-引入方法，选择器，继承

    一.CSS引入方法:行内式.嵌入式.导入式.链接式. 1.行内式. 即:在标签的style属性中设定CSS样式. 例子:<div style="行内式</div> 2.嵌入 ...

  3. 标签种类及CSS引入方法

    标签种类及CSS引入方法 标签种类: 一:块级标签(block) ——> 独占一行,默认宽度与内容无关,宽高可设   (hr 块级标签) 二:行内块标签(inline-block) ——> ...

  4. svg格式矢量图引入方法

    引入方法: span { background: url('1.svg') no-repeat; background-size: 20px 20px; background-position: 0 ...

  5. css_三种引入方法

    CSS是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 详请:http://www.w3school.com.cn/h.asp 其存在方式有三种:元素内联 ...

  6. 关于阿里巴巴iconfont的使用方法

    iconfont网址:http://www.iconfont.cn/ 说起iconfont,做前端开发的应该知道它的好处,图标库之丰富,只有你想不到的,没有你找不到的,而且轻量高清.用户在iconfo ...

  7. mpvue小程序开发之 iconfont图标引入

    背景: mpvue进行小程序项目开发时候,会有很多图标需求,但是小程序官方提供的icon图标库实在有限而且也不利于调样式,所有想到和之前前端项目一样引入iconfont. 图标加入购物车及项目 下载到 ...

  8. css--样式表的引入方法

    html引用css方法如下1.直接在div中使用css样式(内链)2.html中使用style自带式(嵌入)3.使用@import引用外部CSS文件(外部引入)4.使用 link引用外部CSS文件 推 ...

  9. 前端HTML介绍，标签介绍，基础选择器，CSS引入方法

    1. HTML 1.1 前端: 所有用户能看到的界面网页.pc端的应用exe.移动端应用app.微信小程序.手环的时间界面html5为基础的前端:网页.app.微信小程序 1.2 前端三剑客: 1.h ...

随机推荐

  1. div模拟键盘输入

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  2. （最短路 SPFA）Currency Exchange -- poj -- 1860

    链接: http://poj.org/problem?id=1860 Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 2326 ...

  3. 51nod1459迷宫问题—（迪杰斯特拉）

    1459 迷宫游戏  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间, ...

  4. C#之Dictionary 与 C++之map

    最近重学二叉查找树,顺便就好好看了看C#里Dictionary和C++的map的实现原理. 首先简单说明两个基本数据结构: 1. 散列表 散列表是一个key-value数据结构,可根据key值直接访问 ...

  5. DNS本机可解析，其他主机通过本机无法解析问题

    新建了一个redhat虚拟机,将此虚拟机作为dns服务器使用,配置完以后宿主机的dns服务器设置为配置好的虚拟机地址,结果总是显示no Server Reached,没有服务器可以到达,花了很长时间终 ...

  6. ZENCART 菜鸟找人一起学习

    ZENCART 是一个很强大的外贸CMS程序. 现在刚开始学习,虽然晚了五年…… 有兴趣的朋友加群一起学习交流吧 学习论坛: http://www.zencart-bbs.com/thread-htm ...

  7. ASP.NET 邮件发送

    ASP.NET 邮件发送用NET的MAIL类即可实现. 邮件发时,为不影响进程,所以采用多线程实现比较好. /// <summary> /// 多线程邮件发送 多线程需注意不要引用到外部方 ...

  8. sqlserver排名函数

    在做开发的时候,排名函数是sqlserver经常用到的函数,在分页的时候需要用,分组的时候也要用,主要排名函数有row-number,rank(),dense-rank(),NTILE()接下来详细说 ...

  9. InnoDB: The innodb_system data file 'ibdata1' must be writable错误

    重新安装percona5.7过程中,启动mysql服务总是报如下的错误 --10T02::.781070Z [ERROR] InnoDB: The innodb_system data file 'i ...

  10. static修饰的方法不能被重写可以被继承

    今天我们谈谈为什么抽象类中不能有静态的抽象方法以及static修饰的方法不能被重写可以被继承 1 static修饰的方法不能被重写可以被继承我们知道static修饰的方法为静态方法,可以直接使用类名. ...