fontawesome图标字体库

fontawesome图标字体库通过css类可以让你使用众多的图表，堪称一个图标字体的css框架了。Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。具体的有如下特点：

1.图标众多，现在的Font Awesome最新版本为4.7.0，包含了670多个图标，能满足日常使用了。

2.不依赖JavaScript

3.可缩放而不损失质量，因为这个图标库是矢量图标库

4.这些图标字体支持任何可用的css设置，你可以设置图表的font-size,color，shadow等

5.关键是免费

具体可参考其中文网站：http://fontawesome.dashgame.com/

截图如下：

使用方法：

1.在官网上下载之后是个压缩包，也可云盘下载，font-awesome-4.7.0.zip：https://pan.baidu.com/s/1Dv9E7aplMYc68FS-mhEpBQ

2.解压之后即可使用，简单的例子：

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>font-awesome</title>

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

<style>

.fa-address-book{

font-size:26px;

}

.fa-car{

color:red;

}

</style>

</head>

<body>

<i class="fa fa-camera-retro fa-fw"> 相机 

<i class="fa fa-address-book fa-fw"> 地址簿 

<i class="fa fa-car fa-fw"> 汽车 

<i class="fa fa-envelope fa-fw"> 邮件 

<i class="fa fa-id-card fa-fw"> 身份证 

</body>

</html>

说明：

font-awesome的图表都是以fa类加上fa-图标名来展现，图标名可以在官网的首页中找到，首页中列出了所有的可用图标，如下红框框住的就是图标名字：

fa-fw:不是必须的，它的作用是使所有的图表保持同样的宽度，避免图标宽窄的问题，即fixed width的缩写（固定宽度），在列表的时候经常使用：

style中我重写了图表的font-size和color，目的就是为了告诉大家，font-awesome支持任何的css设置。

fontawesome图标字体库相关推荐

字体图标在服务器上显示不出来,fontawesome图标字体库组件在服务器上显示不出来图标的解决...
这个组件在我所开发的网站中被大量使用,为网站增色不少.在本地测试的时候所有图标都能显示出来,可一到服务器上就显示不出来了.网上查列出了可能的原因.其一,IIS没有注册字体类型.经过检查,不存在这个问题 ...
[Xamarin.forms] FontAwesome图标字体库用法
FontAwesome图标字体库在Xamarin.forms用法下载字体文件使用步骤下载字体文件官网: http://www.fontawesome.com (现在免费版的更新到5.12.1版 ...
使用Font-Awesome图标字体库
方法一,在vue +Element 的项目中直接安装.使用Font-Awesome图标字体库: 1. 安装font-awesome: 2.在main.js中引入: import 'font-aweso ...
FontAwesome图标字体库和CSS框架
1.CSS框架简介 Font Awesome是一套绝佳的图标字体库和CSS框架,为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. ...
Qt使用FontAwesome图标字体库
官网: http://fontawesome.io/ 中文网: http://www.fontawesome.com.cn/ GitHub: https://github.com/FortAwesom ...
[c#] 使用Font-Awesome图标字体库
使用Font-Awesome图标字体 .net4.5及以上框架版本可以直接去使用MaterialDesign库中的图标icon,种类也很多.如果不满足版本要求可以使用Font-Awesome图标字体, ...
fontawesome图标字体库下载和使用
点击访问下载地址首页选择start for Free. 跳转到第二个页面后往下翻选择Download. 跳转到第三个页面依旧是往下翻,点击Download Font Awesome Free for ...
Qt中使用Font Awesome图标字体库
一.简介 Font Awesome号称是为Bootstrap设计的完美图标字体,经常出现在各类网页中,非常流行. 官网: https://fontawesome.com/ 中文网: http://ww ...
Font Awesome一套绝佳的图标字体库和CSS框架的使用
场景 Font Awesome 一套绝佳的图标字体库和CSS框架官网: http://fontawesome.dashgame.com/ 实现从官网下载资源文件,解压后的目录将上面解压后的四个目 ...

fontawesome图标字体库

fontawesome图标字体库相关推荐

最新文章

热门文章