FontAwesome测试及工程应用
一、FontAwesome测试
以font-awesome-4.3.0版本为例测试。
1、直接在html页面打出链接图标：
-
<!DOCTYPE html>
-
<head>
-
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
-
<span><i class="fa fa-link"></i>链接</span>
-
</head>
- </html>
如果是IE7,使用font-awesome-ie7.min.css：
-
<!--[if IE]>
-
<link href="fontawesome-4.2.0/css/font-awesome-ie7.min.css" rel="stylesheet" />
- <![endif]-->
注意，引用时要在“fa-link”前面还要加入一个“fa”类，例如 <i class="fa fa-link">！
2、设置颜色与大小
-
<!DOCTYPE html>
-
<head>
-
<link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
-
<br />
-
<span style="font-size:12px;"><i class="fa fa-link"></i>链接</span>
-
<br />
-
<span style="fon-size:20px;"><i class="fa fa-link"></i>链接</span>
-
<br />
-
<span style="color:red"><i class="fa fa-link"></i>链接</span>
-
<br />
-
<span style="color:white;background-color:#003399;"><i class="fa fa-link"></i>链接</span>
-
</head>
- </html>
font-awesome-4.3.0工具上传：
二、FontAwesome工程应用
在Views->Shared->_Layout.cshtml中添加引用：
- <link href="@Url.StaticFile("/assets/font-awesome/css/font-awesome.css")" rel="stylesheet" />
在其它文件直接调用：
运行效果：
参考文献：