@(C-工作問題)
小程序開發(fā)
圖標(biāo)使用
微信小程序開發(fā)觉壶，如果想使用像web端那樣的字體圖標(biāo)，也是可以的件缸，但是也只是支持Unicode铜靶，不支持彩色圖標(biāo)，在網(wǎng)上也查了很多他炊，其實(shí)也有很多都相似争剿，這里大概也就三種方法可以供參考已艰，
base64位
這個(gè)我并不知道是什么，但是好像只需要轉(zhuǎn)換下就可以了蚕苇，也還是很簡單的哩掺，
-
下載好所需的文件，例如iconfont的字體圖標(biāo)
iconfont.png - 下載好的代碼里面的代碼格式如下
ttf.pngzhuanhuan.png
3.在這個(gè)平臺(tái)https://transfonter.org/上轉(zhuǎn)換一下格式為base64位涩笤，轉(zhuǎn)換的格式為
jieguo.png - 下載好的文件里面包含的有style.css 文件嚼吞，打開文件，復(fù)制里面的代碼
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1511264370476'); /* IE9*/
src: url('iconfont.eot?t=1511264370476#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1511264370476') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1511264370476#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-kefu:before { content: "\e625"; }
.icon-shenfenzheng:before { content: "\e626"; }
.icon-quanping:before { content: "\e627"; }
.icon-duigou:before { content: "\e628"; }
.icon-shuoming:before { content: "\e629"; }
5.復(fù)制上面的代碼到小程序的工程里面（需要在那個(gè)文件里面目錄里面使用圖標(biāo)辆它，就復(fù)制到哪里誊薄，如想要在index.wxss的目錄使用，就在index.wxss里面復(fù)制锰茉，也可以在app.wxss里面全局使用）
[圖片上傳失敗...(image-a98c56-1511345997286)]
第二種方法是以文件引入的方式
也就是上面的轉(zhuǎn)換好的文件style.css 改寫后綴為iconfont.wxss 因?yàn)槲⑿胖徽J(rèn)wxss結(jié)尾的style文件
文件結(jié)構(gòu)可以以下圖所示
文件結(jié)構(gòu).png
需要在哪個(gè)文件中用到圖標(biāo)就在哪里引入呢蔫，一般都是放在app.wxss根目錄下，供全局使用飒筑，引入方式為
/**app.wxss**/
iconfont.wxss 的引入方式
@import "/lib/style/iconfont.wxss";
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
直接使用style.css,不轉(zhuǎn)換base64位
在下載好圖標(biāo)后片吊，打開里面的找到style.css ,直接修改后綴為iconfont.wxss 然后移動(dòng)到相應(yīng)的目錄結(jié)構(gòu)，在app.wxss直接引入文件即可
這個(gè)是最為方便的一個(gè)做法协屡，但是還沒有驗(yàn)證是否可以審核俏脊。還待考察。
