CSS3-字体图标的制作

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