原文：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('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"&gt;&amp;#x33;&lt;>

代码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"; }

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

  1. day 51 阿里iconfont的使用

    阿里iconfont的使用   1. 找到阿里巴巴图标库 2.找到图标 3.搜索你想要的图标 4.将图标添加到购物车 5.点击右上角的购物车按钮,我这里添加了两个. 6.提示你登陆,不需要花钱,找其中 ...

  2. 小程序--->小程序图片上传阿里OSS使用方法

    小程序图片上传阿里OSS使用方法 首先看下参考文档 ( http://blog.csdn.net/qq_38125123/article/details/73870667) 这里只将一些运用过程中遇到 ...

  3. Hexo-使用阿里iconfont图标

    Hexo-使用阿里iconfont图标 因为使用hexo搭建的博客中,大家并不懂都有什么图标,fa fa-xx就懵了,不知道都有什么. 首先,fa fa-xxx中的图标可以在 图标库 中寻找. (上面 ...

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

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

  5. vue webpack打包后 iconfont引入路径不对

    vue webpack打包后 iconfont引入路径不对 { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', option ...

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

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

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

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

  8. vue 中使用阿里iconfont彩色图标

    在main.js中 import './assets/images/iconfont/iconfont.css'import './assets/images/iconfont/iconfont.js ...

  9. uni-app 引入本地iconfont的正确姿势以及阿里图标引入

    1.引入本地iconfont iconfont文件里面包含 iconfont.ttf.iconfont.css, 将 iconfont.tt64文件转位 base64.推荐转换工具地址:https:/ ...

随机推荐

  1. Week2-作业1 -阅读《构建之法》

    第一章 在阅读第1.2.2节时,感受最深,记得开学初有老师就给我们分析过计算机专业和我们专业的区别,当时是给我们讲的是计算机科学注重的是理论,偏向于硬件方面,而软件工程则注重实践,偏向于软件方面.然很 ...

  2. java——线性表接口实现

    线性表是存储顺序牌类的数据时最常用的数据结构. 实现线性表有两种方式.第一种是使用数组存储线性表的元素.数组是动态创建的.超过数组的容量时,创建一个 新的更大的数组,并且将当前数组中的元素复制到新建的 ...

  3. mysql子查询批量找id最大的

    $sql = "select a.id as max_id,a.uid from(SELECT `uid`, idFROM (`users_level_change_log`)WHERE ` ...

  4. 成功解决JSP和Servlet的中文乱码问题

    表单提交时出现乱码: 在进行表单提交的时候,经常提交一些中文,自然就避免不了出现中文乱码的情况,对于表单来说有两种提交方式:get和post提交方式.所以请求的时候便有get请求和post请求.以前我 ...

  5. Android手机Fiddler真机抓包

    Fiddler是最强大最好用的Web调试工具之一,它能记录所有客户端和服务器的http和https请求,允许用户监视,设置断点,甚至修改输入输出数据,Fiddler包含了一个强大的基于事件脚本的子系统 ...

  6. 第92天：CSS3中颜色和文本属性

    一.颜色的表示方式 1. rgba(255,0,0,0.1)  rgba是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha透明度.虽然它有的时候被描述为一个颜色空间 新增了RGB ...

  7. 多realm以及jdbcRealm配置

    多realm配置 public class MyRealm1 implements Realm { public String getName() { return "myrealm1&qu ...

  8. MySQL一主两从

    服务器说明: MySQL-Master:192.168.1. MySQL-Slave1:192.168.1. MySQL-Slave2:192.168.1. 关闭防火墙,关闭selinux 统一采用源 ...

  9. BZOJ4950 Wf2017Mission Improbable（二分图匹配）

    先给每个非零格子-1以满足俯视图不变.于是就相当于要求每行每列最大值不变.能减少剩余箱子的唯一方法是在要求相同的行列的交叉处放箱子以同时满足两个需求.给这些行列连边跑二分图匹配即可.注意必须格子初始时 ...

  10. BeanUtils介绍及其使用

    BeanUtils工具由Apache软件基金组织编写,提供给我们使用,主要解决的问题是:把对象的属性数据封装到对象中.在整个J2EE的编程过程中,我们经常会从各种配置文件中读取相应的数据,需要明白的一 ...