在开发过程中我们经常使用各种图标。 为了节约资源，可能不会自己设计必要的图标。 此时，你已经在http://www.iconfont.cn/这个网站上获得了所需的图标。 在开发过程中，我们使用在线图标链接来增加所需的图标或删除多余的图标
也可以直接下载代码
下载的代码包含Unicode、Font class、Symbol和三种引用方法的示例。 使用字体类别。 必须使用iconfont.css、iconfont.eot、iconfont.ttf和iconfont.svg
@font-face { /* 1.首先指定字体系列，然后单击字体图标*/font-family: 'iconfont '； /* 2.以下代码指定字体图标的路径，并与各种移动端浏览器和PC端浏览器兼容。 是否可以根据需要删除不必要的兼容性*/src3360URL(iconfont.eot )？ t=1541904002925 '；/* ie9 */src : URL (icon font.eot？ t=1541904002925#iefix ' ) format (嵌入式- opentype )、/*ie6-IE8 )/URL ) data3360application/x-font ) )。 charset=utf-8； 基本64， d 09 grgabaaaaaaaaa0maasaaaaaaaqaaaaaaaaaaaaaaaaaaaaaa0vcaaabcaaaaaaaaaaaaa-z7 u9 tlziaaaae8aaaaaaraaaaaaaay8-0thy 21 hcaaaaaaaaaaaaaaaaaaaa-ad p (9) tlziaaaaaaaaa acduaaa 74 gyowghlywqaaqeaaaaalwaadytplmaaghlyqaacrqaaadaaajafga5job xr4AAA k1 aaab MAA A8 paiaaaagxvy2eaaaroaroagxvy 2 aabmaaaaa8paiaaaaaagxvy2eaaaaaroaaaaaaaaaacagnikqbwf1laaalkaaauuaaajtpltfxbvc3qaaxwaaamgyobikgpqywb0cfmjyebgygajjajajatwb oiagckiwnpahicy2bkygaaajamy 05 meijqdmodyrgaaaaaq 4g4gzooiagckiwnpahicy2mywyurgygbiygvmwaoc0lxtgbyesbzmz 27438 AQ w9za0aguzgtjaqdlwxxaaq oade AEG1QC H4 uxansujsyvxaeadxgbkw 9sj5sutspaugcccch 4u cgu9wy hk w5 jvnroflw1la 788 n0dw6o 2c E0 RC U6 pn H4 ytiqwkrr5fnzgh9/romcqoy8bhlzsun 0f9HP z8e7GS E8 rfhklqgprrackmwmeo8xgpoglux 4b ysr 98 DWG j7 an4ju wlci7olv rnb 3g n7bdyj6lheefwk 4g/8 logr/ciwfahcmupgejzze ovp3rzjzlpnprgtxz2KF a9 iczamvqszhtguqtbyjhoeidjqyqf5/uqeldtby0HCB VB2nbg arjo6worh 02 ycqy0vsb h8 yealkkzrrrzz 89 rxzrrtvmlidm 45 n6op2udcmuxquzaap0ucrbbkqzwi 50 mkcb0eagpxniih9niahxvobpvqclgi/acu VO5ypp jpe2qx4 qst px 6i st5 n w4 mleonwn8snt 17n/nqpvy9yfvhvpn 3bf3ajyguhzmy5xbcukkpvzsmmfwd 4m NPC G4 iz R4 zlitbkmqsla9ndpxbjqsu9dxezccn/B9 fybccem0re7qgfq9D5 UFO sx1 tdup 16 yzkapnup zm6qg f69 lel QY3nwagejeclrscmlucj9lcxcbulizc4fzowmvcv7ua 316 ayrjbydcebf4cl 61 bqiltw 597 pzww mvrz 7p0ln3q 13 nygpnauld6wvqxde 46 l 92e vfa 07 ihv w8 twfe 7b 73 hdsgmndirje 2q ho8 fwsbujbpyheyoxc/VL rix5tosurep2jnssdqdl0awdwlyafyxxiwdis5ugiq 9g uc7 esadlcfxpkaeqi6tvcwdfp/isr6e7ywbacbmkgxtxgyntcdpkj 50 kje qd9jdopumigbgvgvfhm 1qd
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') 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" rel="external nofollow" href="https://at.alicdn.com/t/font_711552_g7496d85m44.css"> --><!-- (2)上线的时候我们可以把线上的字体图标下载到本地或者是放置在服务器中 --><!-- <link rel="stylesheet" rel="external nofollow" 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，这样就实现开发中字体增删，而不需要重新下载字体文件，只需要更新字体文件路径即可。