IconFont 图标
-
icon_photo
-
icon_mail
-
icon_menu
-
icon_news
-
icon_buy
-
icon_home
-
icon_edit
-
icon_camera
-
icon_computer
-
icon_list
-
icon_cellphone
-
icon_notice
-
icon_me
-
icon_setting
-
icon_rest
-
icon_delete
-
icon_express
-
icon_wallet
-
icon_cart
-
icon_label
-
icon_transport
-
icon_after sales
-
icon_aviation
-
icon_female
-
icon_password
-
icon_male
-
icon_verification code
-
icon_music
-
icon_date
-
icon_customer service
-
icon_address
-
icon_personal information
-
icon_view
-
icon_search
-
icon_printer
-
icon_save
-
icon_time
-
icon_coupons
-
icon_prepaid card
-
icon_red packet
-
icon_like
-
icon_like_sel
-
icon_collect
-
icon_more
-
icon_collect_sel
-
icon_more_sel
-
icon_phone
-
icon_phone_sel
-
icon_help
-
icon_warning
-
icon_right_circle
-
icon_information
-
icon_wrong_circle
-
icon_minus
-
icon_plus
-
icon_minus_circle
-
icon_plus_circle
-
icon_wrong
-
icon_right
-
icon_caret_right
-
icon_caret_left
-
icon_arrow_left
-
icon_arrow_right
-
icon_zoom_in
-
icon_zoom_out
-
icon_back
-
icon_next
-
icon_download
-
icon_upload
-
icon_share
-
icon_move
-
icon_comment
-
icon_refresh
-
icon_input
-
icon_link
-
icon_list
-
icon_caret
-
icon_copy
-
icon_data
-
icon_forward
-
icon_share
-
icon_visible
-
icon_company
-
icon_employ
-
icon_invisible
-
icon_dress up
-
icon_file
-
icon_play
-
icon_weather
-
icon_voice
-
icon_browser
-
icon_scan
-
icon_order
-
icon_qr code
-
icon_wifi
-
icon_location
-
icon_gift
-
icon_mouse
-
icon_calculator
-
icon_hot
-
icon_travel
-
icon_upload
-
icon_microphone
-
icon_train
-
icon_word
-
icon_idea
-
icon_trophy
-
icon_integral
-
icon_target
-
icon_video camera
-
icon_footprint
-
icon_route
-
icon_switch
-
icon_alarm
-
icon_signal
-
icon_server
-
icon_screen
-
icon_choice
-
icon_three-dimensional
-
icon_security
-
icon_add files
-
icon_word
-
icon_add
-
icon_ppt
-
icon_invitation
-
icon_medal
-
icon_excel
-
icon_information
-
icon_global
-
icon_set top
-
icon_move up
-
icon_personal center
-
icon_sign out
-
icon_menu
-
icon_pie chart
-
icon_map
-
icon_text
-
icon_clean
-
icon-42
-
icon_word size_narrow
-
icon_layout
-
icon_grid
-
icon_enclosure
-
icon_word size_enlarge
-
icon_small screen
-
icon_full screen
-
icon_cloud-based
-
icon_pause
-
icon_next
-
icon_previous
-
icon_lightning
-
icon_contact list
-
icon_friends
-
icon_bluetooth
-
icon_gesture
-
icon_resources
-
icon_find
-
icon_adjust
-
icon-setting
-
icon_praise
-
icon_diamond
-
icon_crown
-
icon_education
-
icon_read
-
icon_sign
-
icon_invoice
-
icon_alert
-
icon_asset
-
icon_attention
-
icon_remove friend
-
icon_add friend
-
icon_resume
-
icon_sign in
-
icon_cooperation
-
icon_examine
-
icon_click
-
icon_all day
-
icon_revise
-
icon_like
-
icon_like_sel
unicode引用
unicode是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式
unicode使用步骤如下:
第一步:拷贝项目下面生成的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;
}
第三步:挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。