資訊專欄INFORMATION COLUMN
摘要：開篇廢話開發過小程序的童鞋肯定都會遇到這樣的問題，當我們在小程序中使用官方推薦的方法插入字體時，我們總會得到一個打印機滑稽。那么如何在小程序中正確的使用呢一添加字體使用或其他賬號登錄，將我們需要的字體添加購物車，然后再添加到新建的項目中。
開篇廢話
開發過小程序的童鞋肯定都會遇到這樣的問題，當我們在小程序中使用iconfont官方推薦的方法插入字體時，我們總會得到一個打印機（滑稽）。那么如何在小程序中正確的使用iconfont呢?一、 IconFont添加字體
使用GitHub或其他賬號登錄iconfont，將我們需要的字體添加購物車，然后再添加到新建的項目中。
點擊查看在線鏈接,生成代碼。
點擊下載到本地，將下載好的字體文件中的iconfont.css中的樣式中的代碼粘貼到小程序app.wxss中。
四、 復制代碼復制上面我們生成的在線鏈接粘貼到小程序app.wxss中，最后代碼如下圖。
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
/* padding: 200rpx 0; */
box-sizing: border-box;
}
/*********在線字體代碼start*********/
@font-face {
font-family: "iconfont";
/* project id 706535 */
src: url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.eot");
src: url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.eot?#iefix") format("embedded-opentype"), url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.woff") format("woff"), url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.ttf") format("truetype"), url("http://at.alicdn.com/t/font_706535_gcxl9md3eyj.svg#iconfont") format("svg");
}
/*********在線字體代碼end*********/
/*********字體文件中的代碼start*********/
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon_back::before {
content: "e62c";
}
.icon_close::before {
content: "e628";
}
.icon_refresh::before {
content: "e732";
}
.icon_jiantou_bottom::before {
content: "e605"
}
.icon_jiantou_top::before {
content: "e733"
}
.icon_bill::before {
content: "e627";
}
.icon_edit::before {
content: "e63b";
}
.icon_edit_pen::before {
content: "e609";
}
.icon_right_jiantou::before {
content: "e7a5"
}
/*********字體文件中的代碼end*********/
五、 自定義類名
如果我們覺得icon的名字不好看，我們可以自定義每個icon的類名。
/*** icon_back是自定義的類名 ***/
. icon_back::before {
content: "e7a5"
}
六、 引用
最后我們在wxml中引用。
/*** 注意類名要對應 ***/七、 效果圖。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108300.html
摘要：開篇廢話開發過小程序的童鞋肯定都會遇到這樣的問題，當我們在小程序中使用官方推薦的方法插入字體時，我們總會得到一個打印機滑稽。那么如何在小程序中正確的使用呢一添加字體使用或其他賬號登錄，將我們需要的字體添加購物車，然后再添加到新建的項目中。 開篇廢話 開發過小程序的童鞋肯定都會遇到這樣的問題，當我們在小程序中使用iconfont官方推薦的方法插入字體時，我們總會得到一個打印機（滑稽）。那...
摘要：開篇廢話開發過小程序的童鞋肯定都會遇到這樣的問題，當我們在小程序中使用官方推薦的方法插入字體時，我們總會得到一個打印機滑稽。那么如何在小程序中正確的使用呢一添加字體使用或其他賬號登錄，將我們需要的字體添加購物車，然后再添加到新建的項目中。 開篇廢話 開發過小程序的童鞋肯定都會遇到這樣的問題，當我們在小程序中使用iconfont官方推薦的方法插入字體時，我們總會得到一個打印機（滑稽）。那...
摘要：資源開發文檔是一套完全免費的微信小程序開發框架，擴展了小程序的能力。推薦有一些不錯的解決方案封裝封裝跨頁面事件通訊監聽數據變化開發如何在微信小程序的頁面間傳遞數據需要時可以快速過一遍。微信小程序回調，，，的使用例子供參考 這篇文章主要記錄我做小程序「輕算賬」過程中遇到的一些問題和解決方案，就當是做個總結，也希望其中有能夠幫助到他人的信息。 showImg(https://segment...
摘要：項目名稱我這里是模仿萬達電影小程序，你也可以自己換一個，這里隨意。 如果你是一個小白，想學習或者了解小程序，但是不知從何下手，那么這篇文章應該會對你有所幫助，如果您是一位大佬，那么這篇文章歡迎您吐槽！ 什么是小程序？ 小程序是微信新推出來的一種連接用戶與服務的方式。是一種不需安裝下載就能使用的應用。實現了用完即走的夢想。 小程序的優勢 不用安裝，即開即用，省流量，不占用桌面 對于小程...
閱讀 2983·2021-11-23 09:51
閱讀 2997·2021-11-02 14:46
閱讀 863·2021-11-02 14:45
閱讀 2739·2021-09-23 11:57
閱讀 2492·2021-09-23 11:22
閱讀 1923·2019-08-29 16:29
閱讀 740·2019-08-29 16:16
閱讀 937·2019-08-26 13:44
