html5 css3图标制作,CSS3-字体图标的制作

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

一,字体图标方式

@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