ICON FONT设置方式有2种,一种是字体图标,另一种是SVG
一,字体图标方式
http://www.imooc.com/learn/243
http://fortawesome.github.io/Font-Awesome/
@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