CSS3-字体图标的制作

最新推荐文章于 2022-08-10 11:01:40 发布

weixin_34245749

最新推荐文章于 2022-08-10 11:01:40 发布

阅读量208

点赞数

文章标签： python

原文链接：https://my.oschina.net/ososchina/blog/386458

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/ososchina/blog/386458