摘要:端使用文檔來源于官方文檔用戶在可以下載,多種格式的,平臺也可將圖標轉換為字體,便于前端工程師自由調整與調用。
web端使用(文檔來源于官方文檔)
用戶在iconfont.cn可以下載,多種格式的icon,平臺也可將圖標轉換為字體,便于前端工程師自由調整與調用。
第一步:拷貝項目下面生成的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的樣式(規定了的)
.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;}
第三步:挑選相應圖標并獲取字體編碼,應用于頁面
3
例如: 豆瓣APP中的搜索框
第一步
復制粘貼到中
最后在div中使用
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53618.html
摘要:為什么要使用圖標字體使用這項技術總得有使用它的理由那么,我們來分析下的優缺點,看是不是適合正在開發的項目。優化項目性能字體的加載速度快于圖片,就算圖片經過合并。 為什么要使用圖標字體 使用這項技術總得有使用它的理由!那么,我們來分析下iconfront的優缺點,看是不是適合正在開發的項目。 優點 1、優化項目工作流程 對于web前端項目中的圖標,很多情況下是使用的png圖片,但如果圖標...
摘要:為什么要使用圖標字體使用這項技術總得有使用它的理由那么,我們來分析下的優缺點,看是不是適合正在開發的項目。優化項目性能字體的加載速度快于圖片,就算圖片經過合并。 為什么要使用圖標字體 使用這項技術總得有使用它的理由!那么,我們來分析下iconfront的優缺點,看是不是適合正在開發的項目。 優點 1、優化項目工作流程 對于web前端項目中的圖標,很多情況下是使用的png圖片,但如果圖標...
摘要:作者兩年經驗第一家任職的是個小公司第二家算是二線互聯網公司各待了一年吧能有機會去阿里面試很驚喜先來和大家分享一下面試經歷電話面試初探因為還在職的緣故電話面試從晚上點鐘開始持續了半個小時左右一開始的時候特比緊張甚至聲音略有些顫抖簡單自我介紹做 作者兩年經驗, 第一家任職的是個小公司, 第二家算是二線互聯網公司, 各待了一年吧... 能有機會去阿里面試很驚喜! 先來和大家分享一下面試經歷....
摘要:前端每周清單第期現狀分析與優化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領域內容,以對外文資料的搜集為主,幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期:Web 現狀分析與優化策略...
閱讀 792·2021-09-22 16:01
閱讀 2084·2021-08-20 09:37
閱讀 1693·2019-08-30 15:54
閱讀 1689·2019-08-30 15:44
閱讀 826·2019-08-28 18:23
閱讀 3005·2019-08-26 12:17
閱讀 1005·2019-08-26 11:56
閱讀 1539·2019-08-23 16:20