图标字体Font Awesome 4.7 的引入与使用

下载地址

Download

引入的方式

主要引入font文件夹与font-awasome.min.css文件

假设index.html文件的css都放在同一个目录下的css文件夹中。这时讲fonts文件夹拷入,
fonts文件夹需要与css文件夹在同一个目录下,并且是同等级别。

在css中,需要拷入 font-awesome.min.css 文件。

使用

在index.html中引入。

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css">

在font-awesome.min.css 中修改目录,保证其正确性。

@font-face {
font-family:'FontAwesome';
src:url('../fonts/fontawesome-webfont.eot?v=4.2.0');
src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');

在html中使用示例:

<i class="fa fa-home fa-fw">

猜你喜欢

转载自blog.csdn.net/csdn2193714269/article/details/80662561