博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
FontAwesome测试及工程应用
阅读量:7166 次
发布时间:2019-06-29

本文共 1043 字,大约阅读时间需要 3 分钟。

一、FontAwesome测试

以font-awesome-4.3.0版本为例测试。

1、直接在html页面打出链接图标:

  1. <!DOCTYPE html>
  2. <head>
  3. <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
  4. <span><i class="fa fa-link"></i>链接</span>
  5. </head>
  6. </html>

如果是IE7,使用font-awesome-ie7.min.css:

  1. <!--[if IE]>
  2. <link href="fontawesome-4.2.0/css/font-awesome-ie7.min.css" rel="stylesheet" />
  3. <![endif]-->

注意,引用时要在“fa-link”前面还要加入一个“fa”类,例如 <i class="fa fa-link">!

2、设置颜色与大小

  1. <!DOCTYPE html>
  2. <head>
  3. <link href="font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet">
  4. <br />
  5. <span style="font-size:12px;"><i class="fa fa-link"></i>链接</span>
  6. <br />
  7. <span style="fon-size:20px;"><i class="fa fa-link"></i>链接</span>
  8. <br />
  9. <span style="color:red"><i class="fa fa-link"></i>链接</span>
  10. <br />
  11. <span style="color:white;background-color:#003399;"><i class="fa fa-link"></i>链接</span>
  12. </head>
  13. </html>

font-awesome-4.3.0工具上传:

 

 

二、FontAwesome工程应用

在Views->Shared->_Layout.cshtml中添加引用:

  1. <link href="@Url.StaticFile("/assets/font-awesome/css/font-awesome.css")" rel="stylesheet" />

在其它文件直接调用:

运行效果:

参考文献:

转载地址:http://zwhwm.baihongyu.com/

你可能感兴趣的文章
Nginx主要功能
查看>>
DispatcherTimer 当前时间
查看>>
python 判断变量类型
查看>>
what is Edge Note of MapR
查看>>
领课教育—在线教育系统本地部署运行|windows&Eclipse
查看>>
vcenter6.7升级到vcenter6.7U1,Esxi6.7升级到Esxi6.7U1
查看>>
SpringMVC中的ContextLoaderListener设计困惑
查看>>
如何判断当前主机是物理机还是虚拟机?
查看>>
我的友情链接
查看>>
CSS3 @font-face
查看>>
UICollectionView cell 的布局
查看>>
sqlite3 数据操作 修改
查看>>
TODO:Golang Linux进程退出说明
查看>>
cat >file << EOF
查看>>
使用Maven构建模块化工程
查看>>
SequoiaDB巨杉数据库携手民生银行分布式数据管理平台
查看>>
windows下使用crt远程连接virtualbox里面的linux
查看>>
banner滑动juqery特效 带自动切换
查看>>
Intellij IDEA GIT 分支合并冲突
查看>>
Android中Paint字体的使用
查看>>