IconFont 图标
-
close
-
emoji
-
favor_fill
-
favor
-
location_fill
-
location
-
round_check_fill
-
round_check
-
round_close_fill
-
round_close
-
time_fill
-
time
-
comment_fill
-
comment
-
like_fill
-
like
-
discover
-
more
-
top
-
delete
-
discover_fill
-
ic_admin_me
-
redpacket
-
selection_fill
-
forward_fill
-
forward
-
recharge_fill
-
recharge
-
phone
-
支付宝钱包
-
转账
-
手机通讯录
-
设置
-
付款码
-
search
-
mark_fill
-
mark
-
flower
-
share
-
emoji-smile
-
crown_fill
-
crown
-
picture
-
Incentive bonuses
-
link
-
lightning
-
right
-
download_2f
-
07
-
23
-
25
-
29
-
diamond
-
二维码
-
app
-
me
-
edit
-
diamond
-
camera-party-mode
-
home
-
发起人
-
me1
-
scan
-
discover_line
-
discover_shape
-
book
-
图片
-
read
-
pengyouquan
-
朋友圈
-
yxx_qqzone
-
yxx_alipay
-
card
-
set
-
iocn- left
-
iocn-right
-
iocn-upward
-
iocn- down
-
评分
-
redpacket_fill
-
flower
-
7点赞2
-
7点赞
-
QQ2
-
微信2
-
女
-
男
-
selected
-
wifi-
-
rank
-
example
-
lightbulb
-
ios-qr-scanner
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"。