一、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" />
在其它文件直接调用:
运行效果:
参考文献: