Font Awesome图标CDN引用链接地址

于 2023-09-11 20:26:40 发布
阅读量1.6k 收藏 1
点赞数 2
分类专栏： 前端 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuwuqiba/article/details/132816922
版权

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

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行：

1、国内推荐 CDN：

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

2、海外推荐 CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Font Awesome使用示例：

使用前缀 fa 和图标的名称来放置 Font Awesome 图标

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
 
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
 
</body>
</html>

暴富程序员
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Font Awesome图标字体 5.15.1
05-01
FontAwesome是一款基于CSS框架的网页字体图标库，它完全免费，为您提供可缩放矢量图标，它可被定制大小、颜色、阴影以及任何可用CSS的样式，除此之外，还有SVG框架，流行前端库(如React)的官方NPM包以及访问新CDN等功能。Font Awesome 5.15.1 更新日志：2020-10-06已变更更新到服饰品牌图标。固定从“背心和背心补丁”图标中删除了填充属性；将归因注释移到了精灵的正确位置；修复了套件中未渲染的双色调图标。
Font Awesome图标字体 4.7.0
05-01
FontAwesome是一款基于CSS框架的网页字体图标库，它完全免费，为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可用CSS的样式，除此之外，还有SVG框架，流行前端库(如React)的官方NPM包以及访问新CDN等功能。Font Awesome 4.7.0 更新日志：2016-10-24新图标＃878-添加握手图标；＃897-添加信封打开图标；＃708-添加浴缸，淋浴图标；＃825-添加身份证，地址簿图标；＃720-添加温度计图标；＃9806-添加Linode徽标；＃6927-添加免费代码营徽标。更新的图标＃9633-更新万事达卡徽标。
font-awesome-4.7.0 图标库
03-20
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
CDN字体引用font-awesome
xiyanwushi的专栏
07-21 9264
网络字体
使用font-awesome的CDN链接图标显示不全或显示
唐璜Taro的博客
11-13 1544
项目实施人员突然告诉系统的图标不能显示，我："？？？不能显示 ，我咋没你部署对了吗"。 赶紧排查了一遍，又在项目里面引了一版5.X的，测试一下，全是方框，显示都不会显示，又换了一版，好像有了，这尼玛也不对啊？ 都不显示。这。。。我要一个个尝试吗？ 是的，呜呜呜~~~~终于在茫茫版本中查找到了可以使用的一版，使用低版本是可以的 <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-aweso
每日踩坑--使用Font Awesome关于cdn、http资源、本地资源
t270153399的博客
04-06 1万+
FontAwesome使用指南
Font Awesome使用
wanghexiang1121的博客
06-21 512
1、国内推荐 CDN： <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css"> 2、海外推荐 CDN <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> ...
Font Awesome 5 Pro免费CDN-JavaScript开发
05-26
互联网上最受欢迎的图标工具包已经过重新设计和构建。 最重要的是，具有图标字体连字，SVG框架，面向流行的前端库（如React）...您还可以直接从fontawesome.com订购Font Awesome Pro，其中包括大量其他图标。 文献资料
font-awesome-pro：Font Awesome 5 Pro的CDN免费
02-05
最重要的是，功能包括图标字体连字，SVG框架，面向流行的前端库（如React）的官方NPM软件包以及对新CDN的访问。 不熟悉Font Awesome 5？ 了解我们成功的Kickstarter和计划。 您也可以从直接 ，其中包括大量其他...
font-awesome-v5-icons：Font Awesome v5图标列表（纯JS数组）
02-05
返回Font Awesome v5图标的实际列表（纯JS数组） 安装 $ npm install --save font-awesome-v5-icons 用法 const faIcons = require ( 'font-awesome-v5-icons' ) ; faIcons . getList ( ) . then ( icons => ...
cdn-font:自用字体CDN加速仓库（jsDelivr）如果需要白嫖其他的加速可能会另起炉灶
03-27
CDN字体 自用字体CDN加速仓库（jsDelivr）如果需要白嫖其他的加速可能会另起炉灶
font-awesome-4.7.0
05-16
font-awesome-4.7.0
vue项目中cdn引用font-awesome字体图标
guairena的博客
03-26 1978
在index.html中head标签中引入 <script src="//g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
把Font Awesome引入到自己的项目中
热门推荐
滕青山博客
05-12 11万+
问题 我之前使用的是通过cdn来引入Font Awesome，https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/css/font-awesome.min.css，但是今天发现网址打不开了。 解决 为了防止以后cdn失效，所以干脆把Font Awesome引入到自己的项目中，不用cdn了。 一开始我是直接复制粘贴的font-awesome.min.css文件过来，但是如果打开f12的network可以看到获取字体时候404。 正确解决方法： 点击这里去官
ajax的cdn,GitHub - deajax/FontFace-CDN: 字体使用CDN
weixin_39928667的博客
08-05 474
FontFace字体使用CDN字体为网络搜集，如侵犯版权请联系我删除。​使用方法使用 @font-face 来引入字体链接@font-face {font-family: "Flama";font-weight: normal;font-style: normal;src: url('https://cdn.jsdelivr.net/gh/deajax/FontFace-CDN/src/fonts...
jquery重写自定义鼠标右键弹出菜单列表
tanqingfu1的博客
03-12 1490
生而为人 谁不付出 谁不努力 jQuery仿电脑桌面点击鼠标右键弹出菜单操作，可自定义添加右键菜单代码。需要使用到一个JS文件mouseRight.min.js 1：参数说明 itemname：表示右键菜单“名称”。 icon：新建项font-awesome图标样式如：fa fa-plus。（特别说明一点icon是要通过样式控制的，请到font-awesome.min.css你们查找）...
使用cdn来加速字体文件在前端的加载速度，并监听字体是否加载完成
ButterPig
03-06 1880
最近在个人网站butterpig中实现了个性印章的在线设计功能，里面目前一共实现了有八九种个性印章的样式，并且还有六七种网络开源商用的字体类型。具体效果可以访问：个性印章在线设计查看。 印章的设计，其实原理非常简单，主要就是通过canvas画图技术。而且画的内容也非常简单基础，因此不在这里具体说明。 该功能的难点在于如何在前端加载第三方字体文件。众所周知，字体文件的格式一般有.ttf和.woff等，由于中文和英文的差异性，导致中文字体包的大小一般都比较大，一般都有好几M，更有几十M几百M的字体包文件
腾讯云 cos 字体在CDN上跨域处理
且听风吟的博客
02-14 1841
腾讯云 cos 字体在CDN上跨域
前端时尚好用的图标项目-Font Awesome
叶青
05-12 3万+
概述 作为一个非专业的美工和前端的技术人员，在项目上有时需要用到一些图标，才能使前端看起来比较高大上，以前都是使用收集好的一些小图标，放在目录下面，通过手动添加图片标签来实现，但是这种方式比较繁琐，要收藏较多的图标，找起来也费劲。 推荐 这里我推荐使用fontawesome，这里使用的图标非常好看，使用方式也很简单，同时也支持CDN加速，有着非常不错的用户体验。 Font Awesome介绍 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样
fontawesome 自定义图标
最新发布
05-20
Font Awesome是一个非常流行的图标字体库，它提供了各种各样的标准图标，但有时候需要使用自定义图标来展示更加个性化的设计。下面介绍一下如何使用Font Awesome来创建自定义图标。 1. 首先，需要去Font Awesome官网下载最新的CSS和字体文件，或者使用CDN链接导入到项目中。 2. 打开Font Awesome官网的Icons页面，找到一个空白的图标样式，例如： ``` <i class="fas fa-custom"></i> ``` 其中，`fa-custom` 就是自定义图标的类名。 3. 在CSS文件中添加自定义图标样式，例如： ``` .fa-custom::before { content: "\f123"; font-family: "Font Awesome 5 Free"; } ``` 其中，`content`属性是Unicode字符，可以在官网的图标页面中找到，`font-family`属性需要设置为Font Awesome字体库的名称。 4. 在HTML中使用自定义图标： ``` <i class="fas fa-custom"></i> ``` 这样就可以在页面上显示自定义图标了。 需要注意的是，在使用自定义图标的时候，建议使用 `fa-custom` 这种类名格式，以避免与其他预定义图标的类名冲突。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值