把Font Awesome引入到自己的项目中

最新推荐文章于 2024-06-21 15:26:08 发布
最新推荐文章于 2024-06-21 15:26:08 发布
阅读量10w+ 收藏 2
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34626094/article/details/124738695
版权

问题

我之前使用的是通过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。

正确解决方法：

点击这里去官网下载Font Awesome压缩包并解压，

在这里插入图片描述
把解压后的 font-awesome 目录复制到你的项目中

在<head>处加载font-awesome.min.css，如下:

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

到这里就结束了。

青山abc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
font-awesome.min.css
03-26
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
fontawesome 6 pro
03-15
下面将详细介绍Fontawesome 6 Pro的核心特点、使用方法以及它在前端开发中的重要性。 1. **图标数量与分类**： Fontawesome 6 Pro包含数千个图标，这些图标被精心分类，如常用图标、商业图标、通讯图标、医疗图标...
小白前端学习笔记（一）使用Font Awesome引用icon图标到网页
qq_41973024的博客
11-11 725
小白前端学习笔记（一）使用Font Awesome引用icon图标到网页 一直以来都在为网页没有图标而苦恼，不得不说没有图标的网页实在是丑的一批。一直以来都用图片作为图标，但老实说，还不如不用。今天才发现一个大佬的图标库，好像还挺出名的，由于我是小白，今天才刚接触到，感觉解决了一大难题，现在先记录下来使用的方法，以防忘记。 一.到官网下载文件包（非必须） 文件不大，只有几百K，我下载的版本是4....
C# 在WPF .net8.0框架中使用FontAwesome 6和IconFont图标字体
最新发布
yizhou2010的专栏
06-21 1030
选择Font Awesome 6 Brands-Regular-400.ttf, Font Awesome 6 Free-Regular-400.ttf, Font Awesome 6 Free-Solid-900.ttf，右键【属性】将解压得到的iconfont.css, iconfont.ttf两个文件复制到项目中去，比如这边复制的目录为IconFont文件夹。在弹出的界面中，可以查看所有入库的图标，然后点击【下载代码】为Font Awesome 6 Free-Solid-900.ttf坐在的目录，
FontAwesome图标字体库和CSS框架
pan_junbiao的博客
11-13 3867
1、CSS框架简介 Font Awesome是一套绝佳的图标字体库和CSS框架，为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。仅一个Font Awesome字库，就几乎包含了与网页相关的形象图标。Font Awesome完全不依赖JavaScript，因此无需担心兼容性。 框架创始人：戴夫·甘迪（Dave Gandy） 中文网站：https://fontawesome.dashgame.com/ 2、使用方法 （1）
Font Awesome 的使用
weixin_66591252的博客
07-28 2278
Font Awesome 的使用
css图标库 font-awesome.min.css
weixin_30287169的博客
09-11 4944
下载font-awesome-4.4.0 同时引入font-awesome-4.4.0.min.css 通过<i class='fa fa-sign-out'></i>生成图片 很好用 转载于:https://www.cnblogs.com/jasonxiaoqinde/p/7507921.html
Font Awesome图标CDN引用链接地址
fuwuqiba的博客
09-11 1983
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。使用前缀 fa 和图标的名称来放置 Font Awesome 图标。2、海外推荐 CDN。
FontAwesome 6.1.2 最新专业版
09-07
另一种方式是下载压缩包，如"FontAwesome.Pro.6.1.2"，将其解压后将相应的CSS和字体文件添加到你的项目文件结构中。这样，你就可以通过在HTML中添加特定的类名来使用图标。 在CSS中，你可以使用如`.fa`, `.fas` ...
fontawesome5.15.4 .rar
11-27
在测试网页中，你可以看到所有可用图标的列表，通过简单的代码复制粘贴，就可以将图标应用到自己的项目中。此外，测试网页通常也会提供有关如何导入和使用Fontawesome库的文档和示例代码，这对于初学者尤其有帮助。 ...
BootStrap中的Fontawesome 图标
08-30
在Bootstrap中使用Fontawesome图标需要引入Fontawesome的CSS文件，例如 `~/Content/admin/font-awesome/css/font-awesome.css" rel="external nofollow" rel="stylesheet" />`。然后，在HTML中使用Fontawesome的...
vue-cli3 引入 font-awesome的操作
11-20
补充知识：在Vue2.0中引入font-awesome，并在Element-ui中正确显示font-awesome的icon 如下所示： npm install font-awesome –save 在main.js中引入 import ‘font-awesome/css/font-awesome.css’ 在App.vue的
Vue 第三方字体图标引入 Font Awesome的方法
12-10
这行代码会将Font Awesome的样式导入到你的项目中，使得所有的图标都可用。 **在Vue组件中使用Font Awesome图标** 引入样式后，你可以在Vue组件中直接使用Font Awesome的类名来显示图标。Font Awesome的图标类通常...
FontAwesome-pro-5.12.0-web
12-28
使用FontAwesome 5.12.0非常简单，只需将提供的`FontAwesome-pro-5.12.0`压缩包解压后引入到Web项目中。通常，这涉及到将CSS和JavaScript文件链接到HTML文件，或者通过CDN服务获取。一旦引入，开发者可以利用类名来...
Font Awesome-一款吊炸天的字体图标插件中文全介绍
热门推荐
GarfieldEr007的专栏
09-03 1万+
这款插件是一个不需要图片只需要引入一个字体文件就能制作非常多精美的图标插件，而且这些图标都是矢量的，可以无限放大，而且可以随意的改变颜色，碉堡了！！！ 注意，要看一下内容必须用ie9以上或者是chrome或者是火狐浏览器浏览，ie8一下古董没效果（虽然说是支持ie7的，但是需要引入很多东西，懒得测试= =） 点击下载（版本4.0.3） 使用方法： 解压之后又四个文件夹： 1.把css
字体图标的使用 FontAwesome以及iconfont的使用
Silence_Sep的博客
04-01 1493
Font Awesome https://fontawesome.dashgame.com/ 一、字体图标的引入方式 1、使用link标签引入 这个地址可以使用一些线上的CDN提供的文件地址；也可以把文件存到项目本地，然后使用本项目下的地址，只需要在HTML的head标签里加入下面的代码，就可以引入Font Awesome文件了 <link rel="stylesheet" href="//...
jquery重写自定义鼠标右键弹出菜单列表
tanqingfu1的博客
03-12 1507
生而为人 谁不付出 谁不努力 jQuery仿电脑桌面点击鼠标右键弹出菜单操作，可自定义添加右键菜单代码。需要使用到一个JS文件mouseRight.min.js 1：参数说明 itemname：表示右键菜单“名称”。 icon：新建项font-awesome图标样式如：fa fa-plus。（特别说明一点icon是要通过样式控制的，请到font-awesome.min.css你们查找）...
如何在vue项目中引入font-awesome样式
04-27
您可以使用以下命令安装font-awesome： ``` npm install --save @fortawesome/fontawesome-free ``` 然后在您的Vue组件中，您可以使用以下代码引入font-awesome： ``` import '@fortawesome/fontawesome-free/css/all.css' ``` 这将在您的项目中添加font-awesome的CSS样式，并使其可用于您的组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

青山abc

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值