CSS离线使用fontawesome的问题记录

最新推荐文章于 2025-03-01 16:52:55 发布
最新推荐文章于 2025-03-01 16:52:55 发布
阅读量1.2k 收藏 5
点赞数
分类专栏： html 文章标签： css html web html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wl362002000/article/details/114981655
版权

项目场景：

内网机使用静态网页，导航图标不显示

问题描述：

网上找了一个静态导航网页，在本机打开正常，局域网打开后不显示图标
正常效果预览
源码地址
源码如下

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>自适应布局导航栏</title>
		<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />
		<style>
			* {
				margin: 0;
				padding: 0;
				font-family: 'montserrat', sans-serif;
				box-sizing: border-box;
			}
			.services-section {
				background: #333;
				background-size: cover;
				padding: 60px 0;
			}
			.inner-width {
				width: 100%;
				max-width: 1200px;
				margin: auto;
				padding: 0 20px;
				overflow: hidden;
			}
			.section-title {
				text-align: center;
				color: #ddd;
				text-transform: uppercase;
				font-size: 30px;
			}
			.border {
				width: 160px;
				height: 2px;
				background: #82ccdd;
				margin: 40px auto;
			}
			.services-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			.service-box {
				max-width: 33.33%;
				padding: 10px;
				text-align: center;
				color: #ddd;
				cursor: pointer;
			}
			.service-icon {
				display: inline-block;
				width: 70px;
				height: 70px;
				border: 3px solid #82ccdd;
				color: #82ccdd;
				transform: rotate(45deg);
				margin-bottom: 30px;
				margin-top: 16px;
				transition: 0.3s linear;
			}
			.service-icon i {
				line-height: 70px;
				transform: rotate(-45deg);
				font-size: 26px;
			}
			.service-box:hover .service-icon {
				background: #82ccdd;
				color: #ddd;
			}
			.service-title {
				font-size: 18px;
				text-transform: uppercase;
				margin-bottom: 10px;
			}
			.service-desc {
				font-size: 14px;
			}
			@media screen and (max-width: 960px) {
				.service-box {
					max-width: 45%;
				}
			}
			@media screen and (max-width: 768px) {
				.service-box {
					max-width: 50%;
				}
			}
			@media screen and (max-width: 480px) {
				.service-box {
					max-width: 100%;
				}
			}
		</style>
	</head>
	<body>
		<div class="services-section">
			<div class="inner-width">
				<h1 class="section-title">Our Service</h1>
				<div class="border"></div>
				<div class="services-container">
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-paint-brush"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道，店铺装修是电商系统必备的一个功能，在某些场景下，可能是广告页制作、活动页制作、微页面制作，但基本功能都是类似的。所谓店铺装修，就是用户可以在
							PC端进行移动页辑，属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-brush"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道，店铺装修是电商系统必备的一个功能，在某些场景下，可能是广告页制作、活动页制作、微页要通过简单的拖拽就可以实现页面的编辑，属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-object-ungroup"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道，店铺装修是电商系统必备的一个功能，在某些场景下，可能是广告页制作、活动页制作、微页面制作，但基本功能都是拖拽就可以实现页面的编辑，属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-paint-brush"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							PC端进行移动页面的制作，只需要通过简单的拖拽就可以实现页面的编辑，属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fas fa-database"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道，店铺装修是电商系统必备的一个功能，在某些场景下，可能是广告页制作、活动页制。所谓店铺装修，就是用户可以在
							PC端进行移动页面的制作，只需要通过简单的拖拽就可以实现页面的编辑，属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
					<div class="service-box">
						<div class="service-icon">
							<i class="fab fa-android"></i>
						</div>
						<div class="service-title">Web Design</div>
						<div class="service-desc">
							做过电商项目的同学都知道，店铺装修是电商系统必备的一个功能，在某些场景下，可能是广告页制作、活动页制作、微页面制作，但基本需要通过简单的拖拽就可以实现页面的编辑，属于用户高度自定义的功能。最终编辑的结果。
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

原因分析：

html加载了一个在线的css

<!-- font-awesome -->
<link href="https://cdn.bootcss.com/font-awesome/5.8.0/css/all.css" rel="stylesheet" />

css 分析

@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-brands-400.eot");
  src: url("../webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.woff") format("woff"), url("../webfonts/fa-brands-400.ttf") format("truetype"), url("../webfonts/fa-brands-400.svg#fontawesome") format("svg"); }

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.eot");
  src: url("../webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.woff") format("woff"), url("../webfonts/fa-regular-400.ttf") format("truetype"), url("../webfonts/fa-regular-400.svg#fontawesome") format("svg"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; }
@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

.fa,
.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; }

css中使用了../webfonts/的url
显而易见，内网是无法访问该css及css引用的文件

解决方案：

下载 fontawesome-free-5.15.3-web.zip
关注即可下载

修改css引用路径
将css及webfonts拷贝至相应目录
对应目录结构示意，多余的文件可不用拷贝

├─css
│      all.css
└─webfonts
        fa-brands-400.eot
        fa-brands-400.svg
        fa-brands-400.ttf
        fa-brands-400.woff
        fa-brands-400.woff2
        fa-regular-400.eot
        fa-regular-400.svg
        fa-regular-400.ttf
        fa-regular-400.woff
        fa-regular-400.woff2
        fa-solid-900.eot
        fa-solid-900.svg
        fa-solid-900.ttf
        fa-solid-900.woff
        fa-solid-900.woff2

备注：

因为不熟悉html以及css的开发，只是做一个简单静态页面
走了很多弯路，在解决了问题以后找到了大佬的gitee 学到了很多，大家一起学习！

如果有其他问题可以关注个人公众号咨询

车轮滚滚向西行

Java 17新特性：探索未来的编程趋势
java专栏
08-02 581
Java，这个诞生于1995年的编程语言，已经25岁啦！但它依然年轻、活泼，不断进化，就像一个永远充满活力的魔法师，随时准备施展新的魔法。Java 17引入了对模式匹配的增强，使得代码更加简洁和易于理解。// instanceof模式匹配。
案例16：Java音乐网站系统设计与实现开题报告
qq_39126426的博客
08-21 869
1 选题的意义和研究现状1.1 选题的意义在信息传播十分迅速的时代，我们每个人每时每刻都处于巨大信息输入之中，随着而来的就是巨大的生活压力，因此应该有一种方式能让我们放松下来。正是因为在这样一个信息时代，我们才有更多的机会去接触音乐，音乐网站是一种很好的放松、娱乐的方式，甚至在一定程度上有助于我们的身心健康发展，比如促进记忆力、排解压力缓解抑郁的作用。因此便有了晓宇音乐网站这个题目，当前很多音乐软件如网易云、QQ音乐、酷狗音乐等，深受年轻人喜欢，这促进了音乐网站的诞生，越来越多的网站迎来了一个发展的时期。
Java技术体系 & 发展史（1991 - 2019）
Carson1145的博客
03-30 1076
《深入理解Java虚拟机——JVM高级特性与最佳实践（第三版）》阅读笔记（一） 概述 Java不仅仅是一门编程语言，它还是一个由一系列计算机软件和规范组成的技术体系，这个技术体系提供了完整的用于软件开发和跨平台部署的支持环境，并广泛应用于嵌入式系统、移动终端、企业服务器、大型机等多种场合。 下面罗列一下Java的特性和优势： Java是一门结构严谨、面向对象的编程语言 摆脱了硬件平台的束...
JavaFX与Liberica JDK，搭建，运行，打包，放弃Eclipse
三巧的博客
04-23 2266
JavaFX与Liberica JDK，搭建，运行，打包，放弃Eclipse
【Java就业现状与未来发展深度分析】以后是否还值得学习？
最新发布
xtb666666的博客
03-01 2088
尤其在稳定性要求高的领域占据不可替代的地位。本文将从就业市场、技术趋势、学习价值三个维度解析Java的现状与未来。近年来，随着Python、Go、Rust等语言的崛起，许多开发者开始质疑Java的未来。，未来5-10年仍将是主流语言。
Java主流jdk发行版有哪些?
Java Blogger
07-01 1838
毕昇JDK是中国领先的科技公司华为内部基于OpenJDK定制的Huawei JDK的开源版本，运行在华为内部500多个产品上。Kona JDK是中国领先的互联网公司腾讯基于 OpenJDK 定制开发的 JDK 版本，广泛服务于腾讯内部业务和腾讯云上客户，经过了内部大数据和AI等复杂业务场景的验证，为腾讯。它是OpenJDK开源项目的二进制构建，有免费版本和收费的商业支持版本。Corretto是由亚马逊维护的基于openjdk的免费的jdk生产就绪版本，提供长期支持，其中包括性能增强和安全修复。
JDK版本选择
xinyuan的专栏
04-19 3159
JDK版本选择
2023 年 Java 发展趋势
qq_24785325的博客
01-24 5371
本文基于最重要的事件和成就，概述了 Java 发展的预期趋势。
基于Java的老年人短视频平台后端设计源码
10-01
在当今信息化社会，短视频平台作为数字内容的重要载体，已经渗透到人们日常生活的方方面面，尤其受到了年轻人的青睐。然而，随着社会老龄化趋势的加剧，为老年人提供专属的数字娱乐服务显得尤为重要。基于Java的老年...
基于java+ssm+mysql的校园二手物品交易平台开题报告.docx
01-09
项目开发背景阐述了随着互联网技术的发展，网络购物变得日益普及，尤其在年轻人中，网络购物已成为一种趋势。然而，普遍存在的大型电子商务平台虽种类繁多，但缺乏针对性，不能满足特定群体如大学生的特定需求。因此...
java面试题.zip
05-23
- 对象的生命周期：新生、年轻、老年代及垃圾回收过程。 4. **集合框架** - List, Set, Map接口及其常用实现类：ArrayList, LinkedList, HashSet, TreeSet, HashMap, TreeMap等。 - 集合操作：迭代器，增删查改...
OpenJDK8U-jdk_x64_windows_openj9_8u242b08_openj9-0.18.1.msi
05-06
极大节省内存占用的JAVA虚拟机,IBM官方出品，下载量排名第二的JAVA虚拟机，谁用谁知道，因为众所周知的原因，国内下载非常缓慢
2024年Java发展怎么样？现在学了Java技术出来是否还能找到工作？
2301_76348171的博客
03-25 1215
金三银四到了，送上一个小福利！[外链图片转存中…(img-l3De8j4U-1711350293738)][外链图片转存中…(img-T6STtGl8-1711350293738)]点击传送门，即可免费领取！
Java编程学习——java开发的现状
java03_15的博客
12-08 589
Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。 给你学习路线：html-css-js-jq-javase-数据库-jsp-servlet-Struts2-hibernate-mybatis-spring4-sprin...
Java SE LTS版本商用收费，有那些开源的替代方案？
热门推荐
猫头虎技术团队：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作+：Libin9iOak ，万粉变现+：CSDNWF，猫头虎承诺每年免费为100名C站创作者做账号流量诊断服务！全网搜：猫头虎技术团队，点击文章底部名片或直接私信我一切皆可谈，快找虎哥！
06-12 1万+
Adoptium 提供的 Eclipse Temurin 是一个免费的、开源的 JDK 发行版，由一个广泛的社区支持，非常稳定和可靠。特点社区支持，稳定可靠提供定期更新和安全补丁支持多种平台安装示例替代方案提供商主要特点安装命令Adoptium社区支持，稳定可靠Amazon经过 Amazon 内部测试，免费使用Azul Zulu企业级支持，稳定性高Red Hat适合企业环境，免费使用BellSoft多平台支持，免费使用。
目前java行业的发展
luck_sheng的博客
03-27 688
Java是一种广泛使用的高级编程语言，应用范围广泛，包括企业应用程序、移动应用程序、游戏、Web 应用程序、桌面应用程序等。Java仍然是企业级开发的首选语言。Java有着成熟的开发框架和库，广泛应用于企业级应用开发，如金融、医疗、电子商务等领域。微服务和云计算的兴起，推动Java开发向分布式系统的转变。Java可以使用一些成熟的框架，如SpringCloud，来帮助构建微服务应用程序，为企业带来更高的效率和可扩展性。Java在移动开发领域的应用越来越广泛。Java开发者可以使用Android。
Java 8最新消息
最佳 Java 编程
05-13 219
Java 8的开发再次开始主导新闻。 最近的帖子涵盖了扩展JDK 8的Milestone 7以确保其功能完整，Java 8中现在可用的Date / Time API以及对Java教程的更新以涵盖一些Java 8功能。 扩展JDK 8 M7 马克·雷因霍尔德 （ Mark Reinhold ）以JDK 8 M6的身份写作，并扩展了M7 ，如果该M7版本“功能完整”，则将获得M7“开发人员预...
2019年最新Java和Java工程师发展现状解析，了解一下？
刀哥谈Java的博客
05-03 5163
本文为大家全面解析当前时代Java和Java工程师的行业现状，市场发展及就业薪资等内容，帮你更好的了解行业趋势。 一、生活中，无处不在的Java 只要能够接触到互联网就离不开Java，我们大部分人看到的都是使用Java编程过后的互联网成品，而Java就相当于原材料一样。目前全球有着数十亿的设备正在运行着Java，而且很多服务器程序都是拿Java来编写的，用以处理每天超过数...
Java语言的发展现状与其前景
weixin_40664002的博客
12-17 2303
随着我国经济的快速发展,科学技术也在不断进步。基于计算机软件开发的Java编程语言也迅速发展 起来并逐渐受到人们的重视,被广泛应用在计算机软件的开发上,是发展最快的计算机语言。每年的Java人才缺口人数都高达百万以上。在我们的工作中、学习中、生活中无不存在和使用着互联网信息技术。 事实说明，互联网已经越来越广泛地深入到人们生活的方方面面，Java技术服务市场需求空缺会越来越大。精通一门IT技术，将...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

车轮滚滚向西行

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

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

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

打赏作者

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

抵扣说明：

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

余额充值