前端开发怎么使用图标字体?
获取图标字体:
(1)GlyphiconHalfling:收费的800+图标;
(2)FontAwesome:免费的675个图标;
(3)IconMoon 自定义图标字体,上传svg制作自己想要的图标字体; svg字体获取(http://www.iconfont.cn)
使用图标字体:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--<link rel="stylesheet" href="css/index.css" />--> <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">--> <style> @font-face{ font-family: "PingFang"; //苹果的平方字体 src:url('fonts/PingFangRegular.ttf'); // 还有其他格式的字体,不仅仅是ttf,如woff、eot } @font-face{ font-family: "miui"; //小米兰亭字体 src:url('fonts/miui.ttf'); } p{ font-size: 36px; } .c1{ font-family: 'PingFang'; } .c1{ font-family: 'miui'; } </style> </head> <body> <body> <p class="c1">世事洞明皆学问,人情练达即文章123456789asdfghjkl</p> <p class="c2">世事洞明皆学问,人情练达即文章123456789asdfghjkl</p> </body> </html>