第一步：使用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. 同时安装2个版本的python

    使用pip 当Python2和Python3同时存在于windows上时,它们对应的pip都叫pip.exe,所以不能够直接使用 pip install 命令来安装软件包.而是要使用启动器py.exe ...

  2. linux每天一小步---touch命令详解

    1 命令功能:     创建文件和修改文件或者目录的时间戳 2 命令语法: touch  [选项] [文件名或者目录名] 3 命令参数: -a  只修改文件的access(访问)时间. -c  或-- ...

  3. .NET基础 （20）.NET中的数据库开发

    ADO NET和数据库程序基础1 什么是关系型数据库2 如何通过SQL语句来实现行列转换3 ADO NET支持哪几种数据源 ADO NET和数据库的连接1 请简要叙述数据库连接池的机制2 如何提高连接 ...

  4. OpenGl中的Nurbs B样条曲面的封装的GLU的NURBS的接口

    OpenGl中的Nurbs B样条曲面的封装的GLU的NURBS的接口 创建一个NURBS对象: GLUnurbs* gluNewNurbsRenderer (void); //创建一个NURBS对象 ...

  5. 51nod1057—N的阶乘—（大数阶乘）

    1057 N的阶乘  基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 输入N求N的阶乘的准确值.   Input 输入N(1 <= N <=  ...

  6. SQL -- What Tables Queries are Used to Display the Counts in the Inventory Account Periods form (INVTTGPM.fmb) (Doc ID ID 357997.1)

    Applies to: Oracle Inventory Management - Version 11.5.9 to 12.1.3 [Release 11.5 to 12.1] Informatio ...

  7. AngularJS Backbone.js Ember.js 对比

    看到一篇关于AngularJS Backbone Ember.js的对比,建议看一看 说说个人的观点(本人学艺不精,只是个人的观点,不保证观点完全正确,请轻拍): backbone.js 短小精悍,非 ...

  8. eFrameWork学习笔记-eList

    HTML: <div style="margin:8px;"> <h1>.不分页</h1> <asp:Repeater id=" ...

  9. Sql Server中使用存储过程来实现一些时间差的改变

    Sql Server中的时间差是使用DATEDIFF来是现的 语法如下:DATEDIFF(要显示时间格式,开始时间,结束时间) 比如:DATEDIFF(minute,'2019-2-28 8:30', ...

  10. C#导出EXCEL，并生成charts表

    需要添加引用  Microsoft.Office.Interop.Excel 注意:使用Microsoft.Office.Interop.Excel 非常耗时.对性能有要求建议用其他. 如果要用,把数 ...