微信小程序使用字体图标的方法

项目中常常需要使用到字体图标，微信小程序中使用字体图标与在平常的web前端中类似但是又有区别。下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标。

第一步：下载需要的字体图标

进入阿里图标官网http://iconfont.cn/搜索自己想要的图标，如这里需要一个购物车的图标，流程为：

搜索“购物车”图标--->点击“添加入库”-->点击购物车进入购物车-->点击下载代码按钮。

点击下载代码，将得到名为download.zip的压缩包，解压将看到以下内容：

第二步：转换ttf文件

进入https://transfonter.org/平台，将解压出来的ttf字体文件转化成base64格式。流程如下：

点击下载，得到转换后的压缩包，名为transfonter.org-开头。解压可以得到如下图的几个文件：

第三步：在微信小程序中使用

新建微信小程序，将默认生成的代码删除。

1--在index.css文件中添加样式内容。打开刚刚我们经过转换的解压出来的文件，找到stylesheet.css，将其中的内容全部复制到index.css文件中。注意是转换过的那个文件。

2--打开没有转换过的download.zip解压出来的文件，找到iconfont.css文件，将这个文件中的没有打岔的内容复制到index.css文件中。@font-face这部分不要，只要下边的这部分。

3--在index.wxml中使用字体图标。代码如下：

<!--index.wxml-->
<view class="container">
个人中心
<text class="iconfont icon-wode" style="font-size:50px;color:red"></text>
</view>

效果如下：

字体图标跟字体一样，可以通过font-size来改变大小，通过指定color来改变他的颜色。

总结：到这里微信小程序的字体图标的使用就完成了，这里经过转换成64位编码之后，直接将样式放在css文件中即可，并不需要引入其他以外的文件，相当简洁。

附上css全部代码：

/* this stylesheet generated by transfonter (https://transfonter.org) on july 3, 2017 11:03 am */
 
@font-face {
 font-family: 'iconfont';
 src: url(data:font/truetype;charset=utf-8;base64,aaeaaaaqaqaabaaarkzutx8ko7saab2maaaahederuyajwauaaadbaaaab5puy8yv6bzhaaaaygaaabwy21hciexha4aaaiyaaabmmn2dcancf5maaan5aaaacrmcgdtmpeelqaaa7qaaamwz2fzcaaaabaaab1kaaaacgdsewakl5glaaaokaaadgrozwfkdl/mdgaaaqwaaaa2aghlyqfda2gaaafeaaaajghtdhgxbasbaaab4aaaadhsb2nhfo4qpaaadggaaaaebwf4caffajiaaafoaaaaig5hbwxsswpwaaaajaaaajpwb3n02m13ygaahmgaaacbchjlckw5vmyaaa1maaaalqabaaaaaqaaccglcv8pppuahwqaaaaaanv/0uoaaaaa1x/rsgaa/ywelqnraaaacaacaaaaaaaaaaeaaans/ywaxaqtaaaaaaqtaaeaaaaaaaaaaaaaaaaaaaaoaaeaaaaoahkabgaaaaaaagayaeaabaaaakwbdwaaaaaaaqqcafqabqaaapkczaaaai8cmqlmaaab6wazaqkaaaiabgmaaaaaaaaaaaabeaaaaaaaaaaaaaaaugzfzabaahjmnqoa/4aaxansanqaaaabaaaaaaaabaaaaaaaaaabvqaaa+kalaqaaraeaac9baaangqaanueaaavbc0aaaqaakyeaaaabaeaaaqaaeaaaaadaaaaawaaabwaaqaaaaaalaadaaeaaaacaaqaeaaaaboaeaadaaoaaab45gpmbuyr5hbmgezc5kvmeoae5p3//waaaaaaeoyd5gbmeeyw5hnmquzl5njmhoad//8aap+lggez/xn1gfez7xnhgb8zkxmigxaaaqaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbgaaaqaaaaaaaaabagaaaaiaaaaaaaaaaaaaaaaaaaabaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaawaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaasaasscbgzi2waswgzccwwfcwbczasarfw1ghiyebilggsfbqwcgwqfkbila4ufghsdhzwscwckvhzlaoufghsapfilawufghsdbzgycwwfbyigygiophilakufhggycwifbyibakybsgsdzqwcgwnmabyflzwruwactzwsowafbyzvlzlbaclcbfilaejwfkilafq1bysaujqragi0ibisfzsafglbadlcmhiyegzlefykigsayjqrikaaiqiscwbkmgiicksaarstafjyprwgbqg2fswvgjwsegsebtwlaakxshsebzi7aaufhlws2wbcywccncsacjqraai0kwaeowb0nrwlaiqyuyaaeaq2bcsbzlhfktsaussabdieugsajfy7abrwjgrc2wbiywaemgrscwacsjsqqejwagryojysbkilagufghsaabsdbqwlagg7bawvkjsabqwgvzsamli2ferc2wbyyxbqvfsafhrc2wccywawagilakq0qwafbyilaki0jzsatdsraaulggsasjqlktsaksilgeagiguaqay4ojybamq2agimagsawjqimtsaoss1rysqcbrfkksa1li3gtsasss1fys1nysqcbrfkbivkksbnli3gtsawssqanq1vysq0nq7abyukwcstzsabdsailqriaaqbdyekxcgilqrelaivcsaewiycwayvqwlaaq7aejukkiicki2gwccohi7abyscki2gwccohg7aaq7acjukwaivhsagqivmwcknhsatdr2cwggigsajfy7abrwjgsqaaeynesafdsaa+sgebaungqi2wdsyxaavfvfgasa0jqibgsafhtq4oaqamaejcimcxdaqrsgsrgyjzlbaolleadsstsa8ssqenky2wecyxag0rlbarlleddsstsbissqqnky2weyyxbq0rlbaullegdsstsbussqcnky2wfiyxca0rlbaxllejdsstsbgssacrsqafrvryalani0igylabybuodgeadabcqopgsqwek7brkxsiws2wgsyxabgrlbaallebgcstsbsssqiyky2whcyxaxgrlbadlleegcstsb4ssquyky2whyyxbhgrlbagllehgcstscessqgyky2wiiyxcrgrlbajlcbgsa5giemjsafgq7acjbacjvfyiya8safgi7aszrwbisfzlbakllajk7ajki2wjswgiecgilacrwowauviycnhocmgilvyiecgilacrwowauviycnhobshws2wjiyxaavfvfgasaewscuqsaevmbsiws2wjyywbyuxaavfvfgasaewscuqsaevmbsiws2wkcwgnbabyc2wkswasanfy7abrwkwacuwakvjsaffyraak7aafrqaaaaaaeq+izixkaevki2wkiwgpcbhilacrwowauviylaaq2e4lbarlc4xpc2wlcwgpcbhilacrwowauviylaaq2gwaunjoc2wlsyxagawjsauieewacncsailsyqkrynhi2egwgibivmwasncsiwbaruuki2wliywabawbcwwbcvhi0cjybagrstlii4jica8ijgtsc8ssaawsaqlsaqlic5hi0cjyscwbcncsazfkycwyfbyilbauvizaiadibuzaiydgllcqimgsaldiiojrynhi2ejrmcwbeowggjgilaakyckimegsajdygqjsandywrqwlacq2ebsandyfmwaywwggjhiyagsaqmi0zhobsjsaldrracjbajq0cjrynhyccwbeowggjgiycwacsjsardylaak7afjwgwbswwggkwbczhilaejwbki7adjwbkufghgymhwsmgilaejingythzlbawllaafiagilafjiaurynhi2ejpdgtsdessaawilaji0igicbgi0ewacsjytgtsdissaawsamlsailrynhi2gwafrylia8iyebsailsailrynhi2egsaulsaqlrynhi2gwbiwwbsvjsailybabrwmjifhigyfzy7abrwjgiy4jica8ijgjivktsdmssaawilajqyaurynhi2egylagygawggijica8ijgtsdqsiyaurracjuzswca8ws6xjaeuky2wnswjic5gsailrlbyidxzlrekarqrlba2lcmglkawaivgulggpfkjic5gsailrlbyidxzlrekarqrlba3llaukymglkawaivgulggpfkussqbfcstsdgssc8riiagplaei0kkocmglkawaivgulggpfkussqbfcuwbemuscqrlba5llaafraejbaejiaurynhi2gwbkuriya8ic4jolekarqrlba6llejbcvcsaawsaqlsaqlic5hi0cjyscwbcncsazfkycwyfbyilbauvizaiadibuzaiydgllcqimgr7aeq7caymagsaariiqkyscwakngzcowa0nhzfbysajdyruwa0ngwbadjbcaymgwaivgytgjidwjobshicbgi0ewacsjytghwbekarqrlba7llauky6xjaeuky2wpcywlyshiyagplaei0ijolekarqrsardlrakky2wpsywabugr7aai0kyaaebfrqtlraqki2wpiywabugr7aai0kyaaebfrqtlraqki2wpyyxaaeue7arki2wqcywlsotseessaawrsmglibgiinholekarqrlbbcllaji0kwqsstsemssgaaoistseqssgaboistseussgeaoistseyssgeboistsecssgaaoystsegssgaboystsekssgeaoystseossgeboystsesssgaanystsewssgabnystse0ssgeanystse4ssgebnystse8ssgaaosstsfassgabosstsfessgeaosstsfissgebosstsfmssgaapcstsfqssgabpcstsfussgeapcstsfyssgebpcstsfcssgaaocstsfgssgabocstsfkssgeaocstsfossgebocstsfsssdarlrekarqrlbbcllawk7a0ky2wxsywmcuwnsstsf4ssaawsdarsdyrlbbfllaxky6xjaeuky2wycywmsuwncstsgessdersdurlbbillaxk7a2ky2wyyywmisussqbfcstsgqssdirsdqrlbblllayk7a1ky2wziywmiuwnistsgcssdmrlrekarqrlbbollazk7a0ky2wasywmyuwnsstsgossdmrsdyrlbbrlcuwcgwwayrqelabftataabluadiulixaqgowbkiaagayycwasneiladi3cwdkugieu4aa5rs7agu1pysdqbschzygygilvysailybabrwmjyraci0szcgkfbcuzcgsfbcuzdg8fbctzsgqocuvsrlmkdqyek7egausxjagiuviwqihysqydrlemayhrwlgeaihysqybrflzwvm4af+fsasnsquaraaaaaaaaaaaaaaaaaaaaaaaaaaamgayaxj/4qns/ywdgp/ha1l/laaaaaaaaaaaatwbfahqaigcyglybbaepgu+bdagmgaaaaualp/ha7wdgaawadaaogbsaf4bd0uwe1byqeocaqandg0admyaaw4bdgneaaeicafceaejcaogcv4raqwgbaymxgalbatpdweiaaymcazyaaohbqiecwoewribdg4nuqandqooqhtlsbdqweblageadq4naa5maamoaq4dxgabcagbxbabcqgkcakkzhebdayebgxeaasec2kpaqgabgwiblgacgcfagqlcgrzegeodg1raa0ncg5cg0uwgfbyqewcaqandg0admyaaw4bdgneaaeicafceaejcaoicqpmeqembgqgdarmaasec2kpaqgabgwiblgacgcfagqlcgrzegeodg1raa0ncg5cg0boageadq4naa5maamoaq4dawyaaqgoaqhkeaejcaoicqpmeqembgqgdarmaasec2kpaqgabgwiblgacgcfagqlcgrzegeodg1raa0ncg5cwvlzqchtuzs7mjexf1neu15bwdtso1jlqzc1mtoyohcwfzbreteyesgvqbmwkwegkweidgidase1ncy1nc4ckweviquvfbyudgijbiyraschbysbiicilgi9arcibhqwmzi2ncyxbgcoax4bowyynicuascmjwe1nd4coweyfh0barkbglmsjrwsa5abchgnhox+sgkiarufiw4ohw4glf5jlb0ifbkzibmidwwsegwnehkmcayfcwqcba8ojunrueakfxyjbqkfbqb+paupghw8hykchwemgscatckqhaqnibssyyg0fzo6jrcjaqgagaetgyaopz8rgherghf8ghytja4qdqgygg0jermuaxfkcxgtdb0m4waaaqeq/20c7wlsabcaj0akdaacagebqaabaaiaaqjmaaabagbnaaaaaleaagacrrssfamrkwkbjjq2mhcbmhyxfgcwbw4bbwegiiy0nwkn/neiebgiaz8bbqejaqejaqub/meigbaiaswbjwkxeqj+yqibcq0ncqebaf5icbaycaacal0aqqm/asqalqauab9ahc4tageaauaaaaebae0aaaabuqabaaffjiebag8rjscmjyy3pgi1ncyibhuuhgixfgyhdgepag4bhqeufjsdmjy9atqmjzehawqogwokcqipjgklyhuygwegaquffgkjfxcfjbvxseqbjb4xana3cgskiau8tibwexlwgd0pkwemhayfcgmdoqgofw8zhx8zdxgnct8aaaacaj7/xgnaancagqapaczaixekagacauaaaaiaaqabagibtqabaqjraaibakupkbkyfwmpkweoarceazy/arceatymlwe3pgenlgiifx4bfrqgbwynlge+atc+aqfpvf0lbjvsy28zsf03lryeof0fgggtffhreqpep0fii3uukq5eodlfal8movo5yuilaxchxtcefi04xtowijm1uypeh2hrumcgp2oqcgxhhbwbaaia1f/aaysdqaapabcaiuaeaaeaagmbalkaawaaa00aawmauqaaawbfexqxewqskweddgeijicdjju0njiwfrqmigyufji2namx1aklkiui1rsv+k/tffdxffcbrf48exywewhekeb8r698p9vye1hyewaabqav/68d0qnracmamqa0adgaqgblqeg7aqidojg3awacnju0mziskwcbaanaaaacaqiaawyabqagawugwqadaaiaawjzaaeebafnaaebbfeabaeert49fzuzntuqbxqracigfreubimhiiy1etq2myeynjqmiyeibhurfbyziti2nre0eycmig8baqcxnwe3njqbnxc3jwexnwcnnzyyhwewfanvfxamhp2xhtq0hqe+dbaqdp7cou9oogjpoee5ybhhge/+xbsn6wgrxbn9rqdomoabeh1loig3crciyqgbvxam/ogdksocalacmg8yd0w4/ba3rum5axgmasphfxdd/m7xdcabpuszsf3rcwgefwf1fvs4idgicgeifwaabqaa/z4elqmhabialaa3aeiaead5qbtiaruwyfwcexucqbibacwbbei3agsdp3gbet5lsaxqwebrabuwexyve2yuarmcfhmczaacarycawqaaqawaqbkaweabaqaxaogagqpaqwfbaxaaauxegiicwuiwraodqmlcqehcwdvabyweveyarerchzcg0bsabuwexyve2yuarmcfhmczaacarycawqaaqawaqbkaweabbyabgqkbgiedwembqqmwgaffxiccasfcfkqdg0dcwkbbwshvqawfhfrgaereqowqllak3d2cxbragniwllyv1fqrunbqd08otg2ntixli0rkicleimiehiveymggrcrjsmijjq2owe1ndyyfh0bfayjmquibgcjlgejigyufjmynjczhgezmjy0jimxbsimndyyfhqgizehiiy0njiwfayjmrmhigydaqcgbwyverqwmjy1etq/ati2mzy3njc2nzy1mjy9atq2myeyfhurfbyynjurncyjmqfwmq8xfw9zfx8xfxabozdvdjqnvddbxfxbnvmolw5tnkbcxed+pcivl0mvlyebxcivl0mvlyhb/dunoogdakmwibyh+wecaqubaqmdaqebaqshaisqfhygf0qv5bcff3iqfxcqmq8xbeu0nevcglxcmjjbw4jc7s9cly9cly9cly9clwownyhudqecl1b+fxawfhabgs0yfgmeaqefbqicbgqbhgglfxd9kxaxfxac1tbdaaabakyawwnaajwaeaayqbuaaqeaauacaqabaggaaqfffrusaxercqemigyufwewmjcbnjqmigccap7ccrotcge6crojatsjehsjaq8bjaksggn+xqkjatsjghijaayaap/bbaadqqalabsalwa2ae8avgemqa9nteyvhgumbqfalaefat9lsatqwea/cqghbgqfaqwbbqxmegeceaocbascbfkadq4lduspaqsadgaldlcraqaaaquaavkadamdde0adawduqaddanfg0uwdfbyqdojcacgbaubdaefdgysaqiqcgiecwiewq8bcw4bdqaldvcraqaaaquaavkadamdde0adawduqaddanfg0a/cqghbgqfaqwbbqxmegeceaocbascbfkadq4lduspaqsadgaldlcraqaaaquaavkadamdde0adawduqaddanfwvlala4magbuulfqt05apzw5nju0misqkccmjsqjiiedhbytdbsogwgfaasccxmokwejigyufjsbmjy0jgehigyverqwmyeynjurncyfmxenjicjmcixizajmdejmqypaqe0njmhfsebfayjisimnrehfrqxfj8bfxy2nzy1mtuhnse1mziwfqectq4tew5ndhmtaql8ncauliadzcaulv3kvlyfbqebaqebbqvp/oipcgeq/r0djrck/k4kdwfcagwycxenggucart+7pmkfwhhfb0ufb0uaxovif0gis8viqlgis87/kqnagebah8blqwwxp3tcxypcgh75auhhqoumguldgyc5j7bgqoabqaa/yweaamsabaafaayacaakacgqbepdgifcbaaagcgakagaqibp0uwglbyqdmeaqiacqgccvcacaafcwgfvwalaawgcwxzaayabwogb1cacgaacgbvaamdau8aaqeka0ibqdkaaqadagedvwqbagajcaijvwaiaaulcavxaasadayldfkabgahcgyhvwakaaakswakcgbraaakaevzqbmmjsihib8ehrerererfiesiw0xkyurfayjire3iruzmhydatevayehirmhfsevirehnseriqiyfhqgiiy0baarffxayamaybqs4p1gqalgop7aaud+gaga/iadgg0aexmae5h+2xcpa2cgoc8r98qcw2d+oibaaqdg/sabobmaexmaaaeaqp/ya8adkaaaagplscbqweazageabaeeaafmaamdckeabaqkqqabaqsbqhtlscfqweazageabaeeaafmaaqeckeaawmbtwabaqsbqhtagwaeawadbabmageaaqmaawqaawmbtwabaqsbqllzthereretbrmraq4bbymrirejlgenjjq3ataumtyzmhczaryua6ebbqe9/uc+aqqbicabuyaulb8bavqfar4bawh+vwfbaqmbh1kfavmbir/+rb9zaaaaaawalgabaaaaaaabaagaegabaaaaaaacaayakqabaaaaaaadacmaeaabaaaaaaaeaagargabaaaaaaafaeubqwabaaaaaaagaagbmwadaaeecqababaaaaadaaeecqacaawagwadaaeecqadaeyamaadaaeecqaeabaanaadaaeecqafaioatwadaaeecqagababiqbpagmabwbuagyabwbuahqaagljb25mb250aabnaguazabpahuabqaatwvkaxvtaabgag8abgb0aeyabwbyagcazqagadialgawacaaogagagkaywbvag4azgbvag4adaagadoaiaazac0anwatadiamaaxadcaaezvbnrgb3jnzsayljagoibpy29uzm9udca6idmtny0ymde3aabpagmabwbuagyabwbuahqaagljb25mb250aabwaguacgbzagkabwbuacaamqauadaaowagahqadabmageadqb0ag8aaabpag4adaagacgadgawac4aoqa0ackaiaatagwaiaa4acaalqbyacaanqawacaalqbhacaamgawadaaiaatahgaiaaxadqaiaatahcaiaaiaecaigagac0azgagac0acwaavmvyc2lvbiaxlja7ihr0zmf1dg9oaw50ich2mc45nckglwwgocatcia1mcatryaymdaglxggmtqglxcgikciic1mic1zaabpagmabwbuagyabwbuahqaagljb25mb250aaaaaaiaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaadgaaaaeaagbbaqibaweeaqubbgehaqgbcqekaqskew91amlhbnrvdqr3b2rlbnnlyxjjabbkawxpd2vpemhpc2hlemhpcmrhaxbpbmdqawekzgfpc2hvdwh1bwrpy29ucgrhawzhahvvcwrhawz1a3vhbgzzag91ewuaaaeaaf//aa8aaqaaaawaaaawaaaaagabaaeadqabaaqaaaacaaaaaaaaaaeaaaaa1cszjgaaaadvf9fkaaaaanv/0uo=) format('truetype');
 font-weight: 500;
 font-style: normal;
}
 
.iconfont {
 font-family:"iconfont" !important;
 font-size:16px;
 font-style:normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
 
.icon-search:before { content: "\e611"; }
.icon-youjiantou:before { content: "\e603"; }
.icon-daifukuan:before { content: "\e684"; }
.icon-daishouhuo:before { content: "\e642"; }
.icon-wode:before { content: "\e606"; }
.icon-icon:before { content: "\e64b"; }
.icon-diliweizhishezhi:before { content: "\e616"; }
.icon-daifahuo:before { content: "\e678"; }
.icon-daipingjia:before { content: "\e619"; }
.icon-shouye:before { content: "\e69d"; }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。