Npcink Blog
切换菜单

怎么在网页中调用 Font Awesome 图标?

互联网上最受欢迎的图标工具包已经过重新设计和构建。最重要的是,功能包括图标字体连字,SVG 框架,面向流行的前端库(如 React)的官方 NPM 软件包以及对新 CDN 的访问。

本页目录4 节

Font Awesome)提供丰富的矢量字体图标—通过 CSS 可以任意控制所有图标的大小 ,颜色,阴影。

互联网上最受欢迎的图标工具包已经过重新设计和构建。最重要的是,功能包括图标字体连字,SVG 框架,面向流行的前端库(如 React)的官方 NPM 软件包以及对新 CDN 的访问。

如何使用?

方法壹:调用远程文件

<!--载入远程图标库-->
<link href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" type="text/css">

见演示壹

方法贰:调用本地图标库

安装 FontAwesome 只需简单的几行代码,就可以和 bootstrap 完美兼容

  1. 下载 Font Awesome 最新安装包.
  2. 复制整个font-awesome目录到你的项目
  3. 在你的 html <head>标签里, 引入 font-awesome.min.css.
  4. <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css">
  5. 查看各种 examples 学习 fontawesome 的使用方法

演示贰提供了压缩包,您可以下载至本地解压查阅。

WordPress 怎么使用?:

注意:

此处演示用的为 4.7.0 版本,可免费使用。制作方提供了最新的 5.0 版本,更多图标。更多特性,付费即可享受。

其他图标: