iconfont字體圖標在mpvue中的使用

一、下載iconfot圖標代碼
https://www.iconfont.cn/search/index?searchType=icon&q=arrow
一定要選擇下載代碼
二、選擇下載下來的文件放到 https://transfonter.org/ 這個裏面進行轉換在這裏插入圖片描述在這裏插入圖片描述

三、複製下載下來style.css的代碼放到項目中,有的url已經被轉轉化成了base64

@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"; }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章