Font Awesome字体图标
程序员文章站
2024-02-16 23:31:52
...
Font Awesome为您提供各种字体图标，适合中小网站的使用，利用css控制，所以加载比图片快。先一共支持675个图标。下载地址：点我下载
下载文件，解压，可以看到下面几个文件夹：
下面介绍简单的使用步骤：
1.在html页面中引入需要的css文件，文件名为：
上面两个都可以，第一个是没有压缩过的css文件，第二个是压缩的css文件。
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
2.复制源文件中fonts文件夹放到你的项目根目录。
3.使用
<i class="fa fa-图标名"></i>
如果图标名为weixin，则
<i class="fa fa-weixin"></i>
必须用定义一个类为fa，加载所需要的css样式
可以定义css样式控制图标的颜色及大小，代码如下：
<link rel="stylesheet" type="text/css" href="css/font-awesome.css"/>
<style type="text/css">
.fa-html5{
font-size: 50px;
color: red;
}
</style>
</head>
<body>
<i class="fa fa-html5"></i><br>
</body>
效果如下：
动态图标：
使用fa-spin类来使图标旋转起来，代码如下`
<style type="text/css">
.fa-weixin{
font-size: 60px;
color: red;
</style>
</head>
<body>
<i class="fa fa-spin fa-weixin"></i><br>
</body>
效果就不演示了。
上一篇： Bootstrap字体图标