Lui*_*dez 104 html css font-awesome
最近我一直在开发这个网站,我试图在其中放置一个字体很棒的图标,所以它是可扩展的.
事情是他们没有出现.
看看HTML:
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
要么
<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
我确实把样式表引用放在头部.
我不知道为什么他们没有露面.
这是参考:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
好的,这是完整的HTML:
<head>
<meta charset="UTF-8">
<title>Retrica</title>
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href="style/normalize.css" rel="stylesheet" type="text/css">
<link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="style/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="top-header">
<div class="container"><!-- Start Container -->
<div class="row"><!-- Start Row -->
<div class="span3"><!-- Start Span3 -->
<div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
</div><!-- End Span3 -->
<div class="span9"><!-- Start Span9 -->
<nav class="main-nav"> <!-- Start Nav -->
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
<ul class="nav-ul"> <!-- Start Unordered List -->
<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
<li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>
</ul> <!-- End Unordered List -->
</nav><!-- End Nav -->
</div><!-- End Span9 -->
</div><!-- End Row -->
</div><!-- End Container -->
</header>
<section>
<h1>The greatest way to contact those you love</h1>
<h3>In a way you don't imagine</h3>
<a href="#" class="btncta">Register Now</a>
</section>
</body>
mxr*_*xro 93
对于缺少字体图标的求职者,我收集了一些想法:
确保您使用正确的CDN链接,例如:
<link
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"
rel="stylesheet" type='text/css'>
如果您的网页使用HTTPS,你使用HTTPS(更换链接到字体真棒CSS http://用https://在上面的链接).
仔细检查您是否未启用AdBlock Plus或uBlock.他们可能会阻止一些图标.
重置浏览器缓存.(在Chrome上执行looong点击重新加载按钮并选择Hard Cache Reset)
确保您使用的元素<span>或<i>元素使用FontAwesome字体系列.例如,它不能只是
<i class="fa-pencil" title="Edit"></i>
但
<i class="fa fa-pencil" title="Edit"></i>
如果您在CSS中有以下内容,它将无法工作:
* {
font-family: 'Josefin Sans', sans-serif !important;
}
如果您使用的是IE8,您使用的是HTML5 Shim吗？
如果这不起作用,还有Font Awesome Wiki上的进一步故障排除想法.
小智 92
根据你的参考,你有这个:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
具体来说,href=部分.
但是,在你的完整HTML下是这样的:
<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
您是否尝试过更换src=与href=您的全HTML变成这样？
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
适合我:http://codepen.io/TheNathanG/pen/xbyFg
小智 10
我没有工作,因为我想要一个在我正在使用的FA版本中没有发布的图标.
这就解释了为什么一些图标显示但其他图标
很明显,但我想有些人仍然会为此而堕落.像我这样的.
Rua*_*urg 10
起初，我无法将其与Font Awesome 5配合使用：
<i class="fa fa-sort-down"></i>
这就是为什么我不熟悉字体真棒的原因。因此，当我进一步查看时，我发现我的问题仅仅是版本问题。
在这种情况下，w3schools帮助了我。
Font Awesome 5使用的
fas前缀是Font Awesome 5中的新增功能fa。中的s
fas代表solid，某些图标也具有 常规模式，通过使用prefix指定far。
我已经注意到FontAwesome css文件夹中的不同文件，例如：
那时我才意识到自己的错误。我要做的就是在HTML中包含适当的CSS：
<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">
然后引用正确的项目：
<i class="fas fa-sort-down"></i>
此设置对我有用。虽然并非所有项目在每种类型中都有等效项。这将不起作用：
<i class="far fa-sort-down"></i>
附带说明一下，当您不想引用所有单独的文件时，就足够了：
<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
小智 9
只需在上述答案中添加更多关于 fontawesome 更新的信息，
如果你使用 font awesome 5，
一种。只需复制粘贴以下 HTML，
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
注意：最好<body> {YOUR_SCRIPT_HERE}</body>在 (YOUR_CLOSING_BODY) 之前和之前包含所有脚本
湾 例如，
<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
当fontawesome的最新版本是v5.*但yarn和npm版本指向v4.* (21.06.2019) 时，会创建此答案。换句话说，通过包管理器安装的版本落后于最新版本！
\n\n如果您font-awesome通过包管理器（yarn或npm）安装，请注意安装的是哪个版本。或者，如果您已经安装了font-awesome或者，如果您很久以前
安装 font-awesome 作为新的依赖项：
\n\n$ yarn add font-awesome\nsuccess Saved lockfile.\nsuccess Saved 1 new dependency.\ninfo Direct dependencies\n\xe2\x94\x94\xe2\x94\x80 font-awesome@4.7.0\ninfo All dependencies\n\xe2\x94\x94\xe2\x94\x80 font-awesome@4.7.0\nDone in 3.32s.\n检查已安装的 font-awesome 版本：
\n\n$ yarn list font-awesome\nyarn list v1.16.0\nwarning Filtering by arguments is deprecated. Please use the pattern option instead.\n\xe2\x94\x94\xe2\x94\x80 font-awesome@4.7.0\nDone in 0.79s.\n安装font-awesome依赖项后，您可以将这两个源文件之一font-awesome.css或font-awesome.min.css（在 中创建node_modules/font-awesome/css/）合并到网页的标题中，例如
<head>\n <link type="text/css" rel="stylesheet" href="css/font-awesome.css">\n</head>\n接下来，您访问https://fontawesome.com/。您选择免费图标并搜索登录图标（作为示例）。您复制图标，例如<i class="fas fa-sign-in-alt"></i>，将其粘贴到 html 中，并且图标不显示，或者显示为正方形或矩形！
本质上，通过包管理器安装的版本落后于https://fontawesome.com/网站上显示的版本。正如您所看到的，我们安装了font-awesome v4.7.0，但是网站显示了font-awesome v5.*. 解决方案，访问记录图标的网站v4.7.0 https://fontawesome.com/v4.7.0，复制适当的图标（例如）<i class="fa fa-sign-in" aria-hidden="true"></i>并将其合并到您的 html 中。
I got the similar problem, Shows icons in square, tried as per the instructions specified here : https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
Resolved by using this reference in head section of html page
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
小智 5
您必须对maxcdn.bootstrapcdn.com使用https。maxcdn上只有https支持CORS
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
对于版本 5：
如果您从此站点下载了免费包：
https://fontawesome.com/download
字体位于all.css和all.min.css文件中。
所以你的参考将是这样的：
<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">
fontawesome.css 文件不包含字体引用。