devbox
编程探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

解决在html中引入font-awesome的css文件后， 图标显示不出来

作者：编程探险家 | 2024-01-30 19:49:06

赞

踩

html 本地引入font-awesome.min.css

今天小颖在做项目时，需要在html文件中引入font-awesome.min.css，但是引入后：

以前小颖在用font-awesome库里的图标时，都是直接从node中下包，然后在main.js中引入得即可，第一次直接在html中直接引入css文件，哈哈哈，虽然小颖已经在html中引入了  font-awesome.min.css   ，但是图标并没有出来，怎么解决呢？

其实只需要把font-awesome中的fonts文件夹放在与font-awesome.csss所在的css文件夹同级的位置问题就解决啦，嘻嘻。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>通行费计算</title>
    <link rel="stylesheet" href="./css/amazeui.min.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
</head>

目录：

 

转载于:https://www.cnblogs.com/yingzi1028/p/9591092.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/48833
推荐阅读
  • article

    [HTML]Web前端开发技术3（HTML5、CSS3、JavaScript ）超链接，target，scrolling,marginwidth,frameborder,iframe——喵喵画网页

    文章浏览阅读1.9k次，点赞128次，收藏115次。超链接标签超链接路径相对路径的用法超链接分类超链接的应用超链接的分类创建HTTP文件下载超链接创建FTP站点访问超链接创建图像链接创建电子邮件超链接创建页面书签链接浮动框架制作浮动框架页面... [详细]

    赞

    踩

  • article

    【python selenium报错】selenium.common.exceptions.WebDriverException: Message: ＜html＞ 三种解决方案！

    【pythonselenium报错】selenium.common.exceptions.WebDriverException:Message:三种解决方案！【pythonselenium报错】selenium.common.excepti... [详细]

    赞

    踩

  • article

    HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画_html+css中国脸谱文化网

    网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站|中华传统文化题材|京剧文化水墨风书画|中国民间年画文化艺术网站|HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和... [详细]

    赞

    踩

  • article

    前端登录界面网站设计模板--HTML+CSS

    前端登录界面网站设计模板--HTML+CSS... [详细]

    赞

    踩

  • article

    前端 富文本编辑器原理——从javascript、html、css开始入门_前端富文本编辑器

    大家好，我是yma16，本文分享关于前端富文本编辑器原理——从javascript、html、css开始。富文本编辑器富文本编辑器是指具有格式化文本和图像编辑功能的文本编辑器Contenteditable属性Contenteditable是... [详细]

    赞

    踩

  • article

    前端随笔：HTML/CSS/JavaScript和Vue_vue前端语言css

    Vue(发音为/vjuː/，类似view)是一款用于构建用户界面的JavaScript框架。它基于标准HTMLCSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vu... [详细]

    赞

    踩

  • article

    [HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

    CSS颜色与背景颜色color属性背景background属性1.背景颜色background-color2.背景图像background-image3.背景图像平铺方式background-repeat4.固定/滚动背景图像backgro... [详细]

    赞

    踩

  • article

    小程序-uni-app：将页面（html+css）生成图片/海报/名片，进行下载 保存到手机_uniapp页面生成图片

    本文实现，uniapp微信小程序，把页面内容保存为图片，并且下载到手机上，说实话网上找了很多资料，但是效果不理想，直到看了一个开源项目，我知道可以实现了，本文以开源项目uniapp-wxml-to-canvas为蓝本记录集成的步骤，以供参考... [详细]

    赞

    踩

  • article

    [HTML]Web前端开发技术15（HTML5、CSS3、JavaScript ）表格，bordercolorlight，frame，valign，rowspan，colspan——喵喵画网页

    表格　表格　表格标记　表格标记-语法　表格属性设置　表格边框样式属性　表格单元格间距、单元格边距属性　表格水平对齐　设置表格行的属性　表格行的属性-设置　设置单元格的属性　设置单元格的属性-单元格跨行、列　表格嵌套课后练习网页标题：计算机报... [详细]

    赞

    踩

  • article

    go语言html界面,[译] sciter: 使用 HTML/CSS 构建 Golang 图形界面程序

    作者：ManishChampaneriGolang可视化库sciter这是来自sciter网站的几句话，sciter桌面UI开发带来了一系列网页技术。网页设计者和开发者可以复用他们的经验和专长来构建看起来现代的桌面应用。多种多样的GUI框架... [详细]

    赞

    踩

  • article

    面试 HTML 框架八股文十问十答第一期

    面试必备八股文！内容包含：Java基础、Java框架、Git命令、JVM、多线程、消息队列、微服务、Linux、数据库、Redis缓存、算法、Vue、React、前端性能优化等八股文。面试HTML框架八股文十问十答第一期面试HTML框架八股... [详细]

    赞

    踩

  • article

    炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】_html登录页面代码

    炫酷登录注册界面【超级简单 jQuery+JS+HTML+CSS实现】_html登录页面代码
    炫酷登录注册界面【超级简单jQuery+JS+HTML+CSS】_html登录页面代码html登录页面代码一：源码获取这两天根据需求写了一个比较好看的有动态效果的登录注册切换页面，这里我将源码资源分享给大家，大家可以直接免费下载使用哦，没有... [详细]

    赞

    踩

  • article

    《HTML 简易速速上手小册》第1章：HTML 入门（2024 最新版）

    嗨，朋友们！准备好开始一段令人兴奋的数字冒险吗？让我们从HTML的神秘世界开始吧。HTML，或者说超文本标记语言，不仅仅是编程的一种语言，它更像是网页的魔法咒语。每当你在网上冲浪，浏览各种炫酷的网站时，其实你正在经历HTML的魔法。《HTM... [详细]

    赞

    踩

  • article

    《HTML 简易速速上手小册》第2章：HTML 的标签和元素（2024 最新版）

    现在，想象你在为一款新产品制作介绍页面。你想要清晰地展示产品的名称、特点和用户评价。DOCTYPEhtml>超级充电宝<body><h<em>2</em>>超级充电宝<p>这款<strong>超级充电宝可以在短短30分钟... <a title="《HTML 简易速速上手小册》第2章：HTML 的标签和元素（2024 最新版）" href="/blog/article/detail/44550" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="【HTML 基础】元素和标签" href="/blog/article/detail/44564" target="_blank">【<em>HTML</em> <em>基础</em>】<em>元素</em>和<em>标签</em></a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">这只是<em>HTML</em>中一小部分常见<em>标签</em>的介绍。了解这些<em>基础</em><em>标签</em>是构建网页的第一步。随着你深入学习，你将发现<em>HTML</em>提供了丰富的<em>标签</em>，用于定义文档的结构、内容和样式。继续学习<em>HTML</em>，打造令人印象深刻的Web页面吧！【<em>HTML</em><em>基础</em>】<em>元素</em>和<em>标签</em>文章目... <a title="【HTML 基础】元素和标签" href="/blog/article/detail/44564" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="HTML — 样式 CSS" href="/blog/article/detail/44567" target="_blank"><em>HTML</em> — 样式 <em>CSS</em></a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; "><em>CSS</em>是从<em>HTML</em>4开始使用的，是为了更好的渲染<em>HTML</em>元素而引入的。<em>HTML</em>—样式<em>CSS</em>一.使用    <em>CSS</em>是从<em>HTML</em>4开始使用的，是为了更好的渲染<em>HTML</em>元素而引入的。  ... <a title="HTML — 样式 CSS" href="/blog/article/detail/44567" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="http:/222.212.79/app/zscd.html,emscripten/src/shell.html at 1.29.12 · emscripten-core/emscripten · G..." href="/blog/article/detail/46259" target="_blank"><em>http</em>:/222.2<em>12</em>.79/app/<em>zscd</em>.<em>html</em>,<em>emscripten</em>/src/shell.<em>html</em> at <em>1.29</em>.<em>12</em> · <em>emscripten</em>-core/<em>emscripten</em> · G...</a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">version="1.1"id="Layer_1"x="0px"y="0px"width="296px"height="78px"viewBox="420<em>12</em>0100170"enable-background="new00900400"xm... <a title="http:/222.212.79/app/zscd.html,emscripten/src/shell.html at 1.29.12 · emscripten-core/emscripten · G..." href="/blog/article/detail/46259" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="HTML-表单" href="/blog/article/detail/47688" target="_blank"><em>HTML</em>-<em>表单</em></a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">概念：一个包含交互的区域，用于收集用户提供的数据。示例代码：2.常用<em>表单</em>控件1.文本输入框2.密码输入框3.单选框4.复选框5.下拉框6.隐藏域7.提交按钮8.重置按钮9.普通按钮10.文本域3.禁用<em>表单</em>控件给<em>表单</em>控件的标签设置disabl... <a title="HTML-表单" href="/blog/article/detail/47688" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="CSS font-family 各名称一览表_css字体样式" href="/blog/article/detail/48486" target="_blank"><em>CSS</em> <em>font</em>-<em>family</em> 各名称<em>一览表</em>_<em>css</em><em>字体</em>样式</a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; ">windows常见内置中文<em>字体</em><em>字体</em>中文名<em>字体</em>英文名<em>字体</em>应用宋体SimSun（浏览器默认）中文名英文名浏览器默认黑体SimHei中文名英文名浏览器默认微软雅黑MicrosoftYahei中文名英文名浏览器默认_<em>css</em><em>字体</em>样式<em>css</em><em>字体</em>样式wi... <a title="CSS font-family 各名称一览表_css字体样式" href="/blog/article/detail/48486" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/blog/article/list/1" target="_blank">article<i></i></a><h2><a title="字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06font&background_font awesome brands 的类别" href="/blog/article/detail/48503" target="_blank"><em>字体</em>族、<em>图标</em><em>字体</em>简介、<em>图标</em><em>字体</em>的<em>其他</em>使用方式、IconFont、行高、<em>字体</em>的简写属性、<em>文本</em>的水平和垂直对齐、<em>其他</em>的<em>文本</em>样式——06<em>font</em>&<em>background</em>_<em>font</em> <em>awesome</em> <em>brands</em> 的类别</a></h2></div><div class="NewsInfo"><div class="NewsDesc" style="width: 100%; "><em>字体</em>族、<em>图标</em><em>字体</em>简介、<em>图标</em><em>字体</em>的<em>其他</em>使用方式、IconFont、行高、<em>字体</em>的简写属性、<em>文本</em>的水平和垂直对齐、<em>其他</em>的<em>文本</em>样式_<em>font</em><em>awesome</em><em>brands</em>的类别<em>font</em><em>awesome</em><em>brands</em>的类别目录一、<em>字体</em>族二、<em>图标</em><em>字体</em>简介（fo... <a title="字体族、图标字体简介、图标字体的其他使用方式、IconFont、行高、字体的简写属性、文本的水平和垂直对齐、其他的文本样式——06font&background_font awesome brands 的类别" href="/blog/article/detail/48503" target="_blank">[详细]</a></div><div style="clear: both;"></div></div><div class="article_click rice1" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up txclick" attc="upclick" attn="0"></i><span class="num"> 赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></li></ul><div class="list_tools_top">相关标签</div><div class="list_tools_box"><ul><li><a title="html" rel="nofollow" href="/s?w=html" target="_self">html</a></li><li><a title="前端" rel="nofollow" href="/s?w=前端" target="_self">前端</a></li><li><a title="html5" rel="nofollow" href="/s?w=html5" target="_self">html5</a></li><li><a title="学习" rel="nofollow" href="/s?w=学习" target="_self">学习</a></li><li><a title="网页制作" rel="nofollow" href="/s?w=网页制作" target="_self">网页制作</a></li><li><a title="python" rel="nofollow" href="/s?w=python" target="_self">python</a></li><li><a title="selenium" rel="nofollow" href="/s?w=selenium" target="_self">selenium</a></li><li><a title="开发语言" rel="nofollow" href="/s?w=开发语言" target="_self">开发语言</a></li><li><a title="javascript" rel="nofollow" href="/s?w=javascript" target="_self">javascript</a></li><li><a title="css" rel="nofollow" href="/s?w=css" target="_self">css</a></li><li><a title="dreamweaver" rel="nofollow" href="/s?w=dreamweaver" target="_self">dreamweaver</a></li><li><a title="登录表单" rel="nofollow" href="/s?w=登录表单" target="_self">登录表单</a></li><li><a title="登录" rel="nofollow" href="/s?w=登录" target="_self">登录</a></li><li><a title="富文本编辑器" rel="nofollow" href="/s?w=富文本编辑器" target="_self">富文本编辑器</a></li><li><a title="vue.js" rel="nofollow" href="/s?w=vue.js" target="_self">vue.js</a></li><li><a title="vue" rel="nofollow" href="/s?w=vue" target="_self">vue</a></li><div style="clear: both;"></div></ul></div><div class="list_tools_top"></div></div></div></div><style type="text/css"></style><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/phone.css?v=13352890" type="text/css"><script type="text/javascript"></script></div></div></div></div></div><!--row_1_b100_1695--></div><style type="text/css"> /* footer css */ .index006-cover-page-foot { background-color: #F7F7F7; } </style><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/ads/css/ads.css?v=12890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/ads/js/ads.js?v=1890" ></script><div class="cppui-row-1_100 cppui-row-view-1 row_1_100 ui-draggable" style="display: block;"><div class="cppui-column-1_100-0-1 column-view-com cppui-column-1_100-0-view-1 ui-sortable"><div class="drag-item-show-view-1 footermsg_view_pic ui-draggable" style="display: block;"><!--组件最外层要添加 drag-item-hide-view-1 --><div class="index006-cover-page-foot drag-item-hide-view-1"><p class="copyright">Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。 </p><div style="background-color:#F7F7F7; text-align:center; height:20px;padding-top:5px;"><a target="_blank" href="https://beian.mps.gov.cn/#/query/webSearch" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdnimages.wpsshop.cn/57public/skin/index/default/ui/images/beian_ghs.png" style="float:left;">  <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">闽ICP备14008679号</p></a>  <a href="https://www.wpsshop.cn/xml/article/detail/48833.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a>   <a href="/xml/w/g007/article/detail/new.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a>   <a href="/site.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a></div></div></div></div><!--row_1_b100_hcsoft_1693--></div><!--tjcode0088--><script type="text/javascript">var domain = document.domain;var hr=encodeURIComponent(window.location.href+'=='+document.referrer); document.write('<script src="https://ad.wpsshop.cn/admin.appflux?s=ad_flu_ind&fluxuserauto=yes&hr='+hr+'&p57weburl='+domain+'&p57usercode1='+domain+'&u=Vy1RJQhqAXUEMQNnAm0HaVVu&i='+p57ref("id")+'&r='+escape(document.referrer)+'" language="JavaScript"><\/script>');function p57ref(id){var reg=new RegExp("(^|&)"+id+"=([^&]*)(&|$)");var ref=window.location.search.substr(1).match(reg);if(ref!=null)return unescape(ref[2]);return null;} </script><!--tjcode0088--></body></html>