iconfont的使用——自定义与替换

一、原理：

字体图标是在 Web 项目中使用的图标字体，利用CSS3 @font-face 规则引入雪碧图文件，通过方位显示某个图标，常用图标可直接使用glyphicons/font-awesome;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<i class="fa fa-home"></i>

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

<span class="glyphicon glyphicon-search"></span>

自定义字体图标设置：以glyphicons源码设置为例（不用引用文件是为了浏览器兼容）

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-osx-font-smoothing: grayscale;
}

*注释：.glyphicon class声明一个从顶部偏移 1px 的相对位置，呈现为 inline-block，声明字体，规定 font-style 和 font-weight 为 normal，设置行高为 1。

除此之外，使用 -webkit-font-smoothing: antialiased 和 -moz-osx-font-smoothing: grayscale; 获得跨浏览器的一致性。

.glyphicon:empty {// 为空时保留宽度大小
  width: 1em;
}

.glyphicon-user:before {// 用户头像字体图标方位
  content: "\e008";
}

定制字体图标

默认图标显示

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制字体尺寸

通过增加或减少图标的字体尺寸，您可以让图标看起来更大或更小。

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User
</button>

定制字体颜色

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User
</button>

应用文本阴影

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

在线定制字体图标

点击这里，定制字体图标 »

二、开发环境中使用：

这里介绍 Font Awesome ，它的图标库一共有675个图标，图标查询网址https://9iphp.com/fa-icons，后面自定义图标介绍iconfont 。

npm install font-awesome -S // 引入

import 'font-awesome/css/font-awesome.css' // 1.全局使用：main.js

<i class="iconfont icon-xxx"></i> // 2.直接使用：html

自定义字体图标iconfont：三种引用方式，各种字体图标文件与矢量图的引用自选使用

1.解压文件：登录官网——挑选图标到购物车——下载代码

2.引用本地文件：在自己项目中引入，可直接复制css文件中的代码，最长的是直接引用base64格式的雪碧图

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1577411459799'); /* IE9 */
  src: url('iconfont.eot?t=1577411459799#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANQAAsAAAAAB1wAAAMDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCZIJDATYCJAMICwYABCAFhG0HMhtrBhHVm0/IfiZkcpdbFggd199ZS5IhdJp4Jnggva83SDY7s2D2jFQnI3tSx+QgdHQlVD/bHVxS3SIBAsg3N0PXqAjFkpwH/8sy0zXS/AqAg2OmS/E8oDllFCUOcDygAVXUC/+D/IPxD2MXtMTlEIChhoDo0WvACDw0ZjsBiHmzi6fiZWTohmSBh8CtGKoRu3Dw5GaZADuDnxdfaZYHEkdhpg0Je86gy8f5VpiKKqIJnoJ4Og3ARoECAqBBjKjUDUJFvoDCqD5NHWwrWcDH+RUVHm2z/3ggQLiYiRkAVIO0a6I7jEv9SwmABlxgFbB10K3ArZde1fj+8vCAydpy48wx5OGzW88LdfR8w0yi42dvWktUqFJVxGPic8Zgk5uNHLn/0KETp075owzRmS3nhIrPN7RPntU+/vSIDxizZR/Y0fJQua2KMATU0eawJ89OkdGxMzeMOXUuPm/t6TG/4PzWs53r9Pfr/fSHFAxO/hUo51aQ8ps7yZCkpPBfMriwpLmfCm45ywrDW37iNw+be33qhbW69Et7Om7xgH4NBjRvonRG+LtMfjCu34q2tftdXGW/mxbmux0YhoeaO6mmKWcIPdA4b7uMO8XMQgpOJhccGXIruO0Xd0kcMDIJEroAULFaaxX9j9/hh1AfJmd3+O9ZDcDrpuvWIkY3A3hnrRfw9rM0UFGqNWeacqkVHigkWYV7VxkGA1SATXneDxUV3mpI4FF4w4Y0qieg8KiH1NgAHCwtwMWjMxia6j3akm8JCqHTgSbWAxDkuAySLO6BIkcJUmPfgYPvO7jkpMAwSuRPaWkQZkR3wp3xguMP5kxR2koWYfIN1dvvlGYGuBdSNU4Y2j4fXDAiTdGjftTILEFSCjCD1dD7BJmSxZNbzZynrpNVD2rPFBpBd8Kd8YLjD+ZMUXqlWRS+/4bq7XdqKKiSv5CqqRyGtu+AXHixU8GtnFI/amSWICkFmIEGveVLkKsbWTy51QM8eepQMdmV1y4vCG+3DDCYYims+govNB5Xu1PTAAA=') format('woff2'),
  url('iconfont.woff?t=1577411459799') format('woff'),
  url('iconfont.ttf?t=1577411459799') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1577411459799#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-file_jar:before {
  content: "\e76d";
}

3.使用示例：

<i class="icon-file_jar">jar图标</i>

4.叠加或替换新的图标：如果有之前的图标建议重新打包

@font-face {
  font-family: "my-iconfont";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
}
@font-face {
  font-family: "my-iconfont2";
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANQAAsAAAAAB1wAAAMDAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqCZIJDATYCJAMICwYABCAFhG0HMhtrBhHVm0/IfiZkcpdbFggd199ZS5IhdJp4Jnggva83SDY7s2D2jFQnI3tSx+QgdHQlVD/bHVxS3SIBAsg3N0PXqAjFkpwH/8sy0zXS/AqAg2OmS/E8oDllFCUOcDygAVXUC/+D/IPxD2MXtMTlEIChhoDo0WvACDw0ZjsBiHmzi6fiZWTohmSBh8CtGKoRu3Dw5GaZADuDnxdfaZYHEkdhpg0Je86gy8f5VpiKKqIJnoJ4Og3ARoECAqBBjKjUDUJFvoDCqD5NHWwrWcDH+RUVHm2z/3ggQLiYiRkAVIO0a6I7jEv9SwmABlxgFbB10K3ArZde1fj+8vCAydpy48wx5OGzW88LdfR8w0yi42dvWktUqFJVxGPic8Zgk5uNHLn/0KETp075owzRmS3nhIrPN7RPntU+/vSIDxizZR/Y0fJQua2KMATU0eawJ89OkdGxMzeMOXUuPm/t6TG/4PzWs53r9Pfr/fSHFAxO/hUo51aQ8ps7yZCkpPBfMriwpLmfCm45ywrDW37iNw+be33qhbW69Et7Om7xgH4NBjRvonRG+LtMfjCu34q2tftdXGW/mxbmux0YhoeaO6mmKWcIPdA4b7uMO8XMQgpOJhccGXIruO0Xd0kcMDIJEroAULFaaxX9j9/hh1AfJmd3+O9ZDcDrpuvWIkY3A3hnrRfw9rM0UFGqNWeacqkVHigkWYV7VxkGA1SATXneDxUV3mpI4FF4w4Y0qieg8KiH1NgAHCwtwMWjMxia6j3akm8JCqHTgSbWAxDkuAySLO6BIkcJUmPfgYPvO7jkpMAwSuRPaWkQZkR3wp3xguMP5kxR2koWYfIN1dvvlGYGuBdSNU4Y2j4fXDAiTdGjftTILEFSCjCD1dD7BJmSxZNbzZynrpNVD2rPFBpBd8Kd8YLjD+ZMUXqlWRS+/4bq7XdqKKiSv5CqqRyGtu+AXHixU8GtnFI/amSWICkFmIEGveVLkKsbWTy51QM8eepQMdmV1y4vCG+3DDCYYims+govNB5Xu1PTAAA=') format('woff2');
}

.my-iconfont,my-iconfont2 {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// .my-icon-JAR:before {
//   content: "\e618";
// }

.my-icon-JAR:before {
  content: "\e76d";
}

.my-icon2-JAR:before {
  content: "\e76d";
}

三、使用sass或less

这里举例sass的用法，关于sass的应用可以参考之前写的文章,除了语法问题，其他写法不变

[class^="my-icon-"],[class*=" my-icon2-"] {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

-end-