在开发中我们经常会使用各种图标,为了节省资源,你可能不会自己设计自己需要的图标,这时候你可已通过http://www.iconfont.cn/这个网站来获取自己需要的图标,在开发过程中,我们会使用在线图标链接,易于增加所需图标或者删除多余的图标
或者你可以直接下载代码
下载的代码包含Unicode,Font class ,Symbol,三种引用方式的示例,我们使用Font class,需要用到iconfont.css、iconfont.eot、iconfont.ttf、iconfont.svg、iconfont.woff 这几个文件,我们需要关注的是iconfont.css这个文件,我们先看看代码讲解:
@font-face {
/* 1.首先指定字体的系列,我们指定为字体图标 */
font-family: "iconfont";
/* 2.接下来的代码指定了字体图标的路径,兼容了各种移动端浏览器和PC端浏览器,你可以根据自己的需要,删除不必要的兼容 */
src: url('iconfont.eot?t=1541904002925'); /* IE9*/
src: url('iconfont.eot?t=1541904002925#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAA0MAAsAAAAAFygAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8e0thY21hcAAAAYAAAADMAAACiDmlBB9nbHlmAAACTAAACDUAAA74GYYoWGhlYWQAAAqEAAAALwAAADYTPLMAaGhlYQAACrQAAAAdAAAAJAfgA5JobXR4AAAK1AAAABMAAAA8PAIAAGxvY2EAAAroAAAAIAAAACAgNiKQbWF4cAAACwgAAAAfAAAAIAEsAc9uYW1lAAALKAAAAUUAAAJtPlT+fXBvc3QAAAxwAAAAmwAAAQVATWL9eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByesbzMZ27438AQw9zA0AgUZgTJAQDl+wxaeJzlkssNwkAMRCdkIfwFiFsoAdEAEg1QCH+4UxAnSuJsyVXAeAdxgBKw9SJ5sutsPAugCaAkc5KA4o4CETeqRdZLdLOecGU9wYhKw5JVNrOFLW1la788n0DW6o+2Ce0rCu6PnH4ytIQWKrR5FnZGh9/roMcqoY8BhlzS+un0f9HPz8e7Gse8RfhklQgPrRacKmwmEO8XgpOGLUX4bysR98DWgj7AN4JuwLci7oLvRNb3gn7BDyJ6+lHEefwk4g/8LOgr/CIwfAHCMUPGeJztV1uMVVcZ3v+67LWvZ1/Ovp3rzJzLPnPrGTxz2KfA9ICZAMVqSzHTgUQtbYjhoeIDJqYqF5/UqElDTby0hCbVB2nBGARJO6WoRH02YCQY0vSBh8YEaLkkwBz89zkzZRrTvmlidM45//rXXv/61v+v/7ZHkiXp/nn6Op2UdCmUxqUZaaP0uCRBBkQZwi50mkCb0EAGpxnIIh9nIAhxVobpVqcLgI/acUVO5YPppJPE2Qx4QStpx6ISt5NW4MlEOnWN8+snT17n/NqpVy9yfvHVPn3Bf3ajYguhzMy5xBCUKkpvZsMmMFwD4MnPcG4Izr4zliTbkmQsLA9NDpXpxBJQSu9dXEZCCn/b9FyBCcem0Re7QgFq9d5ufOsx1TDUp16YZKApNnweUqhtyY+GHirjV2Jo/zm6QGf69lelqY+3nWagEjecLrSCMLuCJ9LCXcbuLizc4fzOwmvvcv7ua316AYrjBYDCeBF++4Cl61BqILtw597pZWGkQPxi0Ycgpb33HvAS/mVRz7P0LN3Q13NYGpNaUld6WvqxdE46L92EVfA07IHvw8twFE7B73HDsgmNDIRJE2Qho8fwSbuJBpYhEYOxC/VlRix5tosureP2JnSSdqdL0aWdWLYAfYxXIwdIs5UGIq9GuC7ESadLcFxPkkAEQi6TVCwDfp/isR6e7YWBaCBmKgxtxGynTCdpkj50KjeQD9JDOpUmIGbgVfHM1qfS5S4GXrvRpI04aSTBECo8hMoGqVG00ogRDDVKUq368ZjS/lm4FCdha7ChH7VyamOpf6SgQXr2IJpDDxdI2F/G4zopRjIAQjKFl4I30qjE0yjaCnwhczl+BNrxBF5MCbwMpLOkM52CezKtVuIuZkSqQzk1rC7HqBFiJ5gQ1cbHBNln2a033rjFeUp/CdFoiQIh5Ub0XX8kIn4lrMj5vGrm8irsFrmCauLsV3ZeuLY+VmTucK/mPbFGJ4UiN6d5zVBMTo4YgjR0xnKO5pvGS5yt25aFjKtQYIajAjUmuMz2d4EAJTLI3BKqCVFGtRkHLfJ0In5iz0www7cVPQgtcHWhUw6Mgj/fZEpJUDDQXCIsU9vKFML1wzsymfmfCSD/cLc+rJF8QTZbvGoqBiOHDU5GNZlGjurZ5kuUKVSFbKQDY7aWCcHUhMUEoYQQykh3PxDOJwwOioObqWI72SfXUfkQAKHAGWrigGXqvgag2r7Oxmcs8B1URvZ1AkSUVbpq7k3x0zkTMtvRdEVhvfeF5lpZy1VstVbIFyrqe5TJROZkTCO4TqxVsMZoGtTh+qgQjP/8zCLni2cG9MRVxq6eOHGV86tw8PRNzm+e7tNrUU0UQsOMSmxkXzZPohh/H1gZvThkasWvIFMYRuYINQshM8DOh9q5zd+YLCdBtGqoUdxVGakUhjSH0FIUlkphyzeGe7dpc98WbtdsYedLGc/3rOIw+siRFSZMy8mFTqDohWK1oomsnbXd2LMnRlT57tpdo/6obeZHmjk3zFXrhnANO5txTVBlyiLbEFYxVJz8kKVGi0JVSY5AISK925ufnyx1/FSh0q6RkWqhjAoRKEX1TCmc9sxy7xYRyvCk7cVV13YVrVItFHUlcIK8KmxT5gq30W/DhbzuZzOlvCPMWpZt2TeFIVwy8Lpdx8QYqteiUFPyk1k7Zzqo6ZfXFt3MMEqHJUvVrYgTLgIISJGEVMP42AeKOmW5rjUl1JQt1ABqhXSSk1VBQASMcYXlMwBmQVWUQABTxYEPXXZm8d6RZZ8hxVpKsZa+/WEtrX5CxW/EsnDKsB5LIpFWxsGxK5xfOfZ6SsXlcgNgtPz3EtANK089zq4cO3aF9Sm8+T0nrPRuV0P7gNtc0uEAhvRBabN0QPo21mssZoOPBXI6tDoJVtQwrUYd7KpTEKdqdBpLFSnGBw2sPWkZwx1WWuDxw+Wl7Vhv5b5QfwWrYLIe2um+AZt+O4iORbRfR2GaCNvxxsc5UQHTQW/zYZ4xckd8/5lnnaq7ztWpTqz9hkMBQFtfe/xznvH1YksIXhi1HOsxI/hzPiwLAHpBGAcizF6MHc2qufYf6rVfhOGYynAjD9c87DHqOeEfY3+nZpeG/MzX/Opx36n1Chz+Usrlo9VtoYS53w2VV6NLsZxsUES9KjjV1lSqx3PeUbvqORavjymeLzu/mTQI5L0o/82seESxgrosaq51dKjRnp6YyOdGCMiPZqxZlcljtlMqnKwVNz2aG8m7lpgxqi+7RuCawa/L2irZyMMP0C8kbbb0GfKnfmxIHWzxIQSeADleyR+GyIRXNK2304w+WMHPkacsU+mdF5HSu6CY1ken/4pfh7jdwY4QOtggVvB0XW+npsErZgQQ9e4/mOQ+DRNKJGASwRePIvhHp5LAuLpBGY0wwkypJD0kzUpbpS9gjI84I/W0xVbTxh2mFO1Ju1X/PFzAQA+n8ZGDS2kWpK9u/iAt+iyKVPotrhWkDS6spm93KYAnw/Ng9a5jLG7pGJ0t8ENjdjsh22cHwxMTawHWThiDQd7zIrEii+6dn99LkSEv7tFtHO2v3jAsy0gJubd4+69ziINwc++THbPAB3i9u7M7iECQ3t3JFGwSOIIuHqKH9hi2bczvJWTvfMrtOfScbexO8XYbtmdj1wIrtKWlvDvIJMw7RfLwPUqq42U4007Hp7HUSKROIIWyRFcUBCLdvNy8fPNS7x3OYfjSJRjmvPfOpbOLjN9/6637nC1+6cbGy3Czp1/e2GuuFMEtdIEtnl0Wlf4D/v93x+9/y/vy//Pgk/Pgf/z/vn8C3jGuSAAAAHicY2BkYGAA4nebHljG89t8ZeBmYQCBG7zbmxD0/3oWJuYGIJeDgQkkCgBDUgq3AHicY2BkYGBu+N/AEMPCxAAEQJKRARXwAwBHbQJ8AAAAeJxjYWBgYEHHTFjEsGAACAoAPwAAAAAAAIAA1AN6A7wEiAS4BOgFeAW4BegGGAZsBvwHfHicY2BkYGDgZzzMIMwAAkxAzAWEDAz/wXwGAB65Af0AeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHichU7LEoIwEGtQC/IQf8GLNw5+kbMy0FZ0wYHOCF9vKXJzxpySbDa7IhALYvEbOQJssMUOEiEi7BEjQYoMB+Q4ikhZYtURhxPxYFjJxj4Msby1tRtEvW5tOZOXM++GL9IZgzWncZaTtnOg6LWLlNpVXZ9kmqquWCVvQxOZomy7MVmWPM/WJq/S71kvzn9Ll4b1Z6+E+AD+RUq3AA==') format('woff'),
url('iconfont.ttf?t=1541904002925') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1541904002925#iconfont') format('svg'); /* iOS 4.1- */
}
/* 3.这里设置字体图标的默认样式,你可以更改默认样式 */
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 4.下面的代码就是我们的字体图标使用时引入的代码,通过伪元素 :before 引入的 */
.icon-guangpan:before { content: "\e604"; }
.icon-zanting:before { content: "\e64b"; }
/* 更多的.icon-字体名:before{} */
使用的时候
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试字体图标的使用</title>
<!-- 1.引入字体图标样式 -->
<!-- (1)开发时使用线上的链接 -->
<!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_711552_g7496d85m44.css"> -->
<!-- (2)上线的时候我们可以把线上的字体图标下载到本地或者是放置在服务器中 -->
<!-- <link rel="stylesheet" href="iconfont.css"> -->
<!-- (3)或者直接下载需要的文件样式 -->
<style type="text/css">
@font-face {
/* 1.首先指定字体的系列,我们指定为字体图标 */
font-family: "iconfont";
/* 2.接下来的代码指定了字体图标的路径,兼容了各种移动端浏览器和PC端浏览器,你可以根据自己的需要,删除不必要的兼容 */
src: url('iconfont.eot?t=1541904002925'); /* IE9*/
src: url('iconfont.eot?t=1541904002925#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.ttf?t=1541904002925') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1541904002925#iconfont') format('svg'); /* iOS 4.1- */
}
/* 3.这里设置字体图标的默认样式,你可以更改默认样式 */
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 4.下面的代码就是我们的字体图标使用时引入的代码,通过伪元素 :before 引入的 */
.icon-guangpan:before { content: "\e604"; }
.icon-zanting:before { content: "\e64b"; }
.myfontcss{
font-weight:900;font-size:30px;
}
</style>
</head>
<body>
<!-- 3.使用时,需要引入2个class类,iconfont是必须引入的,另外一个是指定字体图标的名称 -->
<!-- 另外我们可以给每个字体图标另外的样式 -->
<span class='myfontcss iconfont icon-guangpan'></span>
<span class='iconfont icon-guangpan'></span>
</body>
</html>
当然在微信小程序中使用字体图标又是另外一种情况
你在开发的过程中没办法直接使用
@import "https://at.alicdn.com/t/font_711552_g7496d85m44.css";
因为小程序不认识css文件,他们只识别wxss,我们需要换成另外一种方式,打开你的项目代码页面,切换到Unicode,你可以看到@font-face是使用的是线上的字体文件,所以我们可以使用该段代码代替Font class方式的@font-face,这样就实现开发中字体增删,而不需要重新下载字体文件,只需要更新字体文件路径即可。