IconFont 图标
-
baidu0.icon-baidu0
-
douban.icon-douban
-
huaban.icon-huaban
-
iconfont-shoucang.icon-iconfontshoucang
-
kaixinwang.icon-kaixinwang
-
kongjian.icon-kongjian
-
meilishuo.icon-meilishuo
-
pengyouquan0.icon-pengyouquan0
-
pengyouquanyin0.icon-pengyouquanyin0
-
pinterest0.icon-pinterest0
-
qq0.icon-qq0
-
renren0.icon-renren0
-
sina.icon-sina
-
taobao.icon-taobao
-
twitter.icon-twitter
-
wangwang.icon-wangwang
-
weibo.icon-weibo
-
weixin0.icon-weixin0
-
xin.icon-xin
-
zhifubao0.icon-zhifubao0
-
zhihu.icon-zhihu
-
account.icon-account
-
account-circle.icon-accountcircle
-
account-search.icon-accountsearch
-
archive.icon-archive
-
bullhorn.icon-bullhorn
-
cached.icon-cached
-
cake-layered.icon-cakelayered
-
calendar-plus.icon-calendarplus
-
calendar-text.icon-calendartext
-
camera.icon-camera
-
cast.icon-cast
-
cat.icon-cat
-
chart-bar.icon-chartbar
-
chart-line.icon-chartline
-
chevron-double-down.icon-chevrondoubledown
-
chevron-double-left.icon-chevrondoubleleft
-
chevron-double-right.icon-chevrondoubleright
-
chevron-down.icon-chevrondown
-
chevron-left.icon-chevronleft
-
chevron-right.icon-chevronright
-
chevron-up.icon-chevronup
-
city.icon-city
-
clipboard-account.icon-clipboardaccount
-
code-braces.icon-codebraces
-
code-tags.icon-codetags
-
cow.icon-cow
-
desktop-mac.icon-desktopmac
-
diamond.icon-diamond
-
download.icon-download
-
duck.icon-duck
-
earth.icon-earth
-
emoticon-devil.icon-emoticondevil
-
emoticon-poop.icon-emoticonpoop
-
engine.icon-engine
-
folder-account.icon-folderaccount
-
format-list-numbers.icon-formatlistnumbers
-
forum.icon-forum
-
ghost.icon-ghost
-
github-box.icon-githubbox
-
github-circle.icon-githubcircle
-
google-chrome.icon-googlechrome
-
headphones.icon-headphones
-
heart.icon-heart
-
home.icon-home
-
image-filter-drama.icon-imagefilterdrama
-
image-filter-none.icon-imagefilternone
-
image-filter-vintage.icon-imagefiltervintage
-
image-multiple.icon-imagemultiple
-
import.icon-import
-
information.icon-information
-
information-outline.icon-informationoutline
-
internet-explorer.icon-internetexplorer
-
jeepney.icon-jeepney
-
key-variant.icon-keyvariant
-
leaf.icon-leaf
-
led-on.icon-ledon
-
laptop.icon-laptop
-
laptop-chromebook.icon-laptopchromebook
-
laptop-mac.icon-laptopmac
-
laptop-windows.icon-laptopwindows
-
launch.icon-launch
-
layers.icon-layers
-
login.icon-login
-
library-plus.icon-libraryplus
-
lock.icon-lock
-
lock-open.icon-lockopen
-
lock-open-outline.icon-lockopenoutline
-
lock-outline.icon-lockoutline
-
logout.icon-logout
-
magnify.icon-magnify
-
magnify-minus.icon-magnifyminus
-
magnify-plus.icon-magnifyplus
-
menu-down.icon-menudown
-
menu-left.icon-menuleft
-
menu-right.icon-menuright
-
menu-up.icon-menuup
-
message-processing.icon-messageprocessing
-
message-reply.icon-messagereply
-
message-reply-text.icon-messagereplytext
-
message-text.icon-messagetext
-
microsoft.icon-microsoft
-
minus.icon-minus
-
monitor.icon-monitor
-
monitor-multiple.icon-monitormultiple
-
movie.icon-movie
-
music-box.icon-musicbox
-
music-box-outline.icon-musicboxoutline
-
music-circle.icon-musiccircle
-
music-note.icon-musicnote
-
navigation.icon-navigation
-
newspaper.icon-newspaper
-
note-text.icon-notetext
-
notification-clear-all.icon-notificationclearall
-
open-in-app.icon-openinapp
-
open-in-new.icon-openinnew
-
package-variant.icon-packagevariant
-
panda.icon-panda
-
paper-cut-vertical.icon-papercutvertical
-
paw.icon-paw
-
plus.icon-plus
-
pound.icon-pound
-
printer.icon-printer
-
printer-alert.icon-printeralert
-
puzzle.icon-puzzle
-
radar.icon-radar
-
radioactive.icon-radioactive
-
recycle.icon-recycle
-
refresh.icon-refresh
-
reply.icon-reply
-
reply-all.icon-replyall
-
routes.icon-routes
-
rss.icon-rss
-
rss-box.icon-rssbox
-
send.icon-send
-
settings.icon-settings
-
share-variant.icon-sharevariant
-
square-inc-cash.icon-squareinccash
-
table-edit.icon-tableedit
-
television.icon-television
-
television-guide.icon-televisionguide
-
tag.icon-tag
-
tag-multiple.icon-tagmultiple
-
teamviewer.icon-teamviewer
-
telegram.icon-telegram
-
thumb-up-outline.icon-thumbupoutline
-
ticket-account.icon-ticketaccount
-
thumb-down.icon-thumbdown
-
thumb-down-outline.icon-thumbdownoutline
-
thumb-up.icon-thumbup
-
tooltip-edit.icon-tooltipedit
-
unfold-less.icon-unfoldless
-
unfold-more.icon-unfoldmore
-
upload.icon-upload
-
vector-combine.icon-vectorcombine
-
view-dashboard.icon-viewdashboard
-
video.icon-video
-
view-grid.icon-viewgrid
-
view-headline.icon-viewheadline
-
view-list.icon-viewlist
-
view-module.icon-viewmodule
-
vimeo.icon-vimeo
-
whatsapp.icon-whatsapp
-
windows.icon-windows
-
wordpress.icon-wordpress
-
wrench.icon-wrench
-
xbox-controller.icon-xboxcontroller
-
windows.icon-windows1
-
xbox-controller.icon-xboxcontroller1
-
window-close.icon-windowclose
-
xml.icon-xml
-
linux.icon-linux1
font-class引用
font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。
与unicode使用方式相比,具有如下特点:
- 兼容性良好,支持ie8+,及所有现代浏览器。
- 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的fontclass代码:
<link rel="stylesheet" type="text/css" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<i class="iconfont icon-xxx"></i>
"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。