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

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

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

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

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

如何使用?

方法壹:调用远程文件

<!--载入远程图标库-->
<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怎么使用?:

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

怎么加载 CSS 和JS? - wordpress开发

这将确保网站保持高效并且不存在不兼容问题。

注意:

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

其他图标:

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

Iconfont - 阿里巴巴矢量图标库

国内功能很强大且图标内容很丰富的矢量图标库
怎么在网页中调用Font Awesome图标?-Npcink
怎么在网页中调用Font Awesome图标?-Npcink

草莓图标库介绍及使用

在网站的开发中,总会用到一些图标,今天介绍一款草莓图标库。他不仅绘制精美,使用方便且免费,体积还很小。

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
2020-05-20
Designer

WebGradients - 精选的CSS3,.sketch和.PSD格式的出色渐变集合

2020-2-27 20:19:48

Designer

Neumorphism - 在线制作轻拟物 UI 设计按钮

2020-9-18 3:25:11

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索