• 章节:7
  • 访问:1172
  • 时长:00:10:49
  • 日期:2018-12-27 09:30

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

Font Awesome 是一套绝佳的图标字体库和CSS框架。

官网

 http://fontawesome.com/?from=io

下载地址 

http://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

http://fontawesome.dashgame.com/


当然也可以引入CDN

<link rel="stylesheet" href="http://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

fontawesome的使用很简单。只需要增加下面的css样式

class="fa fa-***"

这种css样式 这个***就是不同的样式图标 读者可以参考官网提供的名称

这里的*** 也有带横线的 比如fa-camera-retro 也有不带横线的 比如fa-qq

<i class="fa fa-qq"></i>
<i class="fa fa-email"></i>
<i class="fa fa-envira"></i>
<i class="fa fa-chrome"></i>
<i class="fa fa-file"></i>

读者 可以参考http://fontawesome.dashgame.com/

如果要本地引入 则需要我们下载下来

然后引入到项目中来

clipboard.png

然后引入css

<link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />


再次运行

另外本身我们的标签 也支持自己的css样式

比如

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
<meta charset="utf-8" />
    <link href="font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
</head>
<body>
    <i class="fa fa-qq" style="font-size:60px;color:red;"></i>
    <i class="fa fa-email"></i> 
    <i class="fa fa-envira"></i>
    <i class="fa fa-chrome"></i> 
    <i class="fa fa-file"></i>
</body>
</html>

clipboard.png