成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何在vue中使用iconfront(離線狀態(tài) 離線字體)

baiy / 2299人閱讀

摘要：端使用文檔來源于官方文檔用戶在可以下載，多種格式的，平臺(tái)也可將圖標(biāo)轉(zhuǎn)換為字體，便于前端工程師自由調(diào)整與調(diào)用。

web端使用(文檔來源于官方文檔)

用戶在iconfont.cn可以下載，多種格式的icon，平臺(tái)也可將圖標(biāo)轉(zhuǎn)換為字體，便于前端工程師自由調(diào)整與調(diào)用。

第一步：拷貝項(xiàng)目下面生成的font-face

  @font-face {font-family: "iconfont";

src: url("iconfont.eot");
src: url("iconfont.eot?#iefix") format("embedded-opentype"),
url("iconfont.woff") format("woff"),
url("iconfont.ttf") format("truetype"),
url("iconfont.svg#iconfont") format("svg");
}

第二步：定義使用iconfont的樣式(規(guī)定了的)
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁面
3

例如： 豆瓣APP中的搜索框

 第一步
 

復(fù)制粘貼到中

最后在div中使用

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53618.html

相關(guān)文章

  • iconfront優(yōu)化項(xiàng)目圖標(biāo)

    摘要：為什么要使用圖標(biāo)字體使用這項(xiàng)技術(shù)總得有使用它的理由那么，我們來分析下的優(yōu)缺點(diǎn)，看是不是適合正在開發(fā)的項(xiàng)目。優(yōu)化項(xiàng)目性能字體的加載速度快于圖片，就算圖片經(jīng)過合并。 為什么要使用圖標(biāo)字體 使用這項(xiàng)技術(shù)總得有使用它的理由！那么，我們來分析下iconfront的優(yōu)缺點(diǎn)，看是不是適合正在開發(fā)的項(xiàng)目。 優(yōu)點(diǎn) 1、優(yōu)化項(xiàng)目工作流程 對(duì)于web前端項(xiàng)目中的圖標(biāo)，很多情況下是使用的png圖片，但如果圖標(biāo)...

    Karuru 評(píng)論0 收藏0

  • iconfront優(yōu)化項(xiàng)目圖標(biāo)

    摘要：為什么要使用圖標(biāo)字體使用這項(xiàng)技術(shù)總得有使用它的理由那么，我們來分析下的優(yōu)缺點(diǎn)，看是不是適合正在開發(fā)的項(xiàng)目。優(yōu)化項(xiàng)目性能字體的加載速度快于圖片，就算圖片經(jīng)過合并。 為什么要使用圖標(biāo)字體 使用這項(xiàng)技術(shù)總得有使用它的理由！那么，我們來分析下iconfront的優(yōu)缺點(diǎn)，看是不是適合正在開發(fā)的項(xiàng)目。 優(yōu)點(diǎn) 1、優(yōu)化項(xiàng)目工作流程 對(duì)于web前端項(xiàng)目中的圖標(biāo)，很多情況下是使用的png圖片，但如果圖標(biāo)...

    Riddler 評(píng)論0 收藏0

  • 前端面試分享: 兩年經(jīng)驗(yàn)社招-阿里巴巴

    摘要：作者兩年經(jīng)驗(yàn)第一家任職的是個(gè)小公司第二家算是二線互聯(lián)網(wǎng)公司各待了一年吧能有機(jī)會(huì)去阿里面試很驚喜先來和大家分享一下面試經(jīng)歷電話面試初探因?yàn)檫€在職的緣故電話面試從晚上點(diǎn)鐘開始持續(xù)了半個(gè)小時(shí)左右一開始的時(shí)候特比緊張甚至聲音略有些顫抖簡單自我介紹做 作者兩年經(jīng)驗(yàn), 第一家任職的是個(gè)小公司, 第二家算是二線互聯(lián)網(wǎng)公司, 各待了一年吧... 能有機(jī)會(huì)去阿里面試很驚喜! 先來和大家分享一下面試經(jīng)歷....

    JowayYoung 評(píng)論0 收藏0

  • 前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略、Vue 單元測試、Headless Chrom

    摘要：前端每周清單第期現(xiàn)狀分析與優(yōu)化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現(xiàn)狀分析與優(yōu)化策略...

    HackerShell 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<