预览ttf格式字体
-
\e60earrow-left
-
\e605arrow-right
-
\e60darrow-down
-
\e606arrow-up
-
\e601arrow-leftward
-
\e603arrow-rightward
-
\e607arrow-upward
-
\e604arrow-downward
-
\e62cerror-circle-fill
-
\e624error-circle
-
\e6aatwitter
-
\e6abtwitter-circle-fill
-
\e63cdownload
-
\e807checkbox-mark
-
\e649mic-off
-
\e64amic
-
\e68ecolumnline
-
\e8fapause
-
\e61echatfill
-
\e620chat
-
\e669starfill
-
\e65fstar
-
\e64fphone-fill
-
\e622phone
-
\e64emap-fill
-
\e61dmap
-
\e651tags-fill
-
\e629tags
-
\e63bbookmark-fill
-
\e60abookmark
-
\e634calendar-fill
-
\e66ecalendar
-
\e658trash-fill
-
\e623trash
-
\e63dcheckmark-circle
-
\e635checkmark-circle-fill
-
\e637close-circle-fill
-
\e63fclose-circle
-
\e631share
-
\e65eshare-fill
-
\e612edit-pen
-
\e66bedit-pen-fill
-
\e638clock-fill
-
\e60fclock
-
\e68afacebook-circle-fill
-
\e689facebook
-
\e648eye-off
-
\e62beye-off-outline
-
\e641eye-fill
-
\e613eye
-
\e600arrow-down-fill
-
\e6b0arrow-up-fill
-
\e675play-left-fill
-
\e676play-right-fill
-
\e66dplay-left
-
\e610play-right
-
\e98bphoto-fill
-
\e98dphoto
-
\e659volume-off-fill
-
\e644volume-off
-
\e670volume-fill
-
\e633volume-up
-
\e690red-packet-fill
-
\e691red-packet
-
\e61aman-delete
-
\e66aperson-delete-fill
-
\e61cman-add
-
\e64cman-add-fill
-
\e64binfo-circle-fill
-
\e7d2info-circle
-
\e693level
-
\e7f5wenjianjia
-
\e7f6video
-
\e881apple-fill
-
\e885chrome-circle-fill
-
\e67bbackspace
-
\e632attach
-
\e948cut
-
\e602empty-car
-
\e682empty-coupon
-
\e646empty-address
-
\e67cempty-favor
-
\e686empty-permission
-
\e687empty-news
-
\e664empty-search
-
\e887github-circle-fill
-
\e608rmb
-
\e788reload
-
\e68forder
-
\e6bcserver-man
-
\e62asearch
-
\e955fingerprint
-
\e630more-dot-fill
-
\e662scan
-
\e60bzhuanfa
-
\e618minus
-
\e62dplus
-
\e653info
-
\e715question
-
\e6d3error
-
\e685close
-
\e6a8checkbox-mark
-
\e67eandroid-circle-fill
-
\e67dandroid-fill
-
\e87bie
-
\e889ie-circle-fill
-
\e87agoogle
-
\e88agoogle-circle-fill
-
\e872setting-fill
-
\e61fsetting
-
\e855minus-square-fill
-
\e856plus-square-fill
-
\e851heart-fill
-
\e7dfheart
-
\e7d7camera
-
\e870camera-fill
-
\e63emore-circle
-
\e645more-circle-fill
-
\e617bag-fill
-
\e619bag
-
\e666question-circle-fill
-
\e625question-circle
-
\e621shopping-cart
-
\e65dshopping-cart-fill
-
\e609bell
-
\e640bell-fill
-
\e650list
-
\e616list-dot
-
\e6bazhihu
-
\e709zhihu-circle-fill
-
\e6b9zhifubao
-
\e6b8zhifubao-circle-fill
-
\e6b1weixin-circle-fill
-
\e6b2weixin-fill
-
\e6a7taobao-circle-fill
-
\e6a6taobao
-
\e6a5weibo-circle-fill
-
\e6a4weibo
-
\e6a1qq-fill
-
\e6a0qq-circle-fill
-
\e69amoments-circel-fill
-
\e69bmoments
-
\e695qzone
-
\e696qzone-circle-fill
-
\e680baidu-circle-fill
-
\e681baidu
-
\e60ccar
-
\e636car-fill
-
\e64dwarning-fill
-
\e694warning
-
\e611email
-
\e642email-fill
-
\e61bminus-circle
-
\e652minus-circle-fill
-
\e62eplus-circle
-
\e661plus-circle-fill
-
\e663file-text
-
\e665file-text-fill
-
\e7e3pushpin
-
\e86epushpin-fill
-
\e673grid
-
\e678grid-fill
-
\e647play-circle
-
\e655play-circle-fill
-
\e654pause-circle-fill
-
\e643pause-circle
-
\e65cgift-fill
-
\e65bgift
-
\e657rmb-circle-fill
-
\e677rmb-circle
-
\e656kefu-ermai
-
\e751server-fill
-
\e8c4coupon-fill
-
\e8aecoupon
-
\e704integral
-
\e703integral-fill
-
\e964home-fill
-
\e965home
-
\e966hourglass-half-fill
-
\e967hourglass
-
\e628account
-
\e626plus-people-fill
-
\e615minus-people-fill
-
\e614account-fill
-
\e726thumb-down-fill
-
\e727thumb-down
-
\e733thumb-up
-
\e72fthumb-up-fill
-
\e979lock-fill
-
\e973lock-open
-
\e974lock-opened-fill
-
\e97alock
-
\e679rewind-left-fill
-
\e67arewind-right-fill
-
\e674skip-back-left
-
\e672skip-forward-right
-
\e66frewind-right
-
\e671rewind-left
-
\e68darrow-right-double
-
\e68carrow-left-double
-
\e668empty-wifi
-
\e667wifi
-
\e62fempty-data
-
\e684empty-history
-
\e68bempty-list
-
\e627empty-page
-
\e639empty-order
-
\e697man
-
\e69cwoman
-
\e70azh
-
\e692en
-
\e793xuznzhe
-
\e794rocketline
-
\e795rocket
-
\e796arrowtext
-
\e797cube
-
\e798minusfill
-
\e799arrow-down-circle
-
\e800arrow-up-circle
-
\e801arrow-left-circle
-
\e802arrow-right-circle
-
\e803check-double-fill
-
\e804checkbox-blank-circle-line
-
\e805checkbox-blank-line
-
\e806checkboxs-circle-fill
-
\e819checkboxs-circle-line
-
\e808checkboxs-fill
-
\e809checkboxs-indeterminate-fill
-
\e810checkboxs-indeterminate-line
-
\e811checkboxs-line
-
\e812checkboxs-multiple-blank-fill
-
\e813checkboxs-multiple-blank-line
-
\e814checkboxs-multiple-fill
-
\e815checkboxs-multiple-line
-
\e816closes-circle-fill
-
\e817close-circle-line
-
\e818close-fill
第一步：使用font-face声明字体
@font-face {
font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff2') format('woff2'), /* chrome、firefox、opera、Safari, Android, iOS */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}
第二步：定义使用iconfont的样式
.iconfont {
font-family: "iconfont" !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-tree:after {content: '\33';}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">3</i>
or
<i class="iconfont icon-three"></i>