CSS3-字体图标的制作

原创
2015/03/13 07:32
阅读数 1.1K

ICON FONT设置方式有2种,一种是字体图标,另一种是SVG 


一,字体图标方式

http://imooc.com/video/6356

http://www.imooc.com/learn/243

http://fortawesome.github.io/Font-Awesome/

http://icomoon.io

http://iconfont.cn/


@font-face {
	font-family: 'Linearicons-Free';
	src:url('fonts/Linearicons-Free.eot?w118d'); //IE兼容模式
	src:url('fonts/Linearicons-Free.eot?#iefixw118d') format('embedded-opentype'),//兼容IE
		url('fonts/Linearicons-Free.woff2?w118d') format('woff2'),
		url('fonts/Linearicons-Free.woff?w118d') format('woff'),
		url('fonts/Linearicons-Free.ttf?w118d') format('truetype'),
		url('fonts/Linearicons-Free.svg?w118d#Linearicons-Free') format('svg');
	font-weight: normal;
	font-style: normal;
}


二.SVG

SVG

是path动画,兼容性不够好


---------------------------------状态选择器--------------------

.tooltip-content::after

.tooltip-effect-1:hover .tooltip-content i 




展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
7 收藏
0
分享
返回顶部
顶部