一、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工具上传：
font-awesome-4.zip
二、FontAwesome工程应用
在Views->Shared->_Layout.cshtml中添加引用：
-
<link href="@Url.StaticFile("/assets/font-awesome/css/font-awesome.css")" rel="stylesheet" />
在其它文件直接调用：
运行效果：
参考文献：
http://www.cnblogs.com/wangfupeng1988/p/4129500.html
阅读(1857) | 评论(0) | 转发(0) |
