我无法在弹出窗口中添加Font Awesome图标，请帮我解决问题。我不知道如何在CSS中添加图标并更改颜色。
以下是HTML代码：
<i class="fas fa-check-circle">
这是CSS：
.fa-check-circle {color: #ffffff;}
出了什么问题？ 它不能工作。我在弹出窗口中看不到图标。 这是我的网址
如何添加和更改 Font Awesome 图标
3
- Gammi
6个回答
7
没有添加Fontawesome库。请添加。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
- doğukan
2
谢谢你的回答。你救了我的命 :)
我在哪里可以找到这个链接？我已经阅读了fontawesome网站上的常见问题解答，但没有找到关于该链接的信息。 - Gammi
在“开始”页面。 - doğukan
1
替换这个 -
<i class="fas fa-check-circle">
带有
<i class="fa fa-check-circle">
- M3ghana
1
问题在于您没有使用Font Awesome CDN。CDN是内容分发网络，指地理位置分布的一组服务器，它们共同工作以提供快速的互联网内容传送。CDN允许快速传输加载互联网内容所需的资源，包括HTML页面、JavaScript文件、样式表、图像和视频。
在您的情况下，您使用的类（fas fa-check-circle）是写在Font Awesome服务器内的。要访问它们，您应该链接您的网页。为此，请使用以下链接。
在您的情况下，您使用的类（fas fa-check-circle）是写在Font Awesome服务器内的。要访问它们，您应该链接您的网页。为此，请使用以下链接。
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-
B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
crossorigin="anonymous">
另一种使用fontawesome图标的方法是下载他们的整个图标库，其中包含他们的脚本和类，并将它们直接链接到您的页面上。
- Faizal Hussain
3
非常感谢您的回答。现在它可以工作了！我在哪里可以找到这个链接？我已经观看了font-awesome网站上的FAQ会话，但没有找到有关链接的任何信息。这个链接是恒定的吗？如果我下次使用来自此版本（v5.5.0）的字体awesome图标，我应该使用此链接吗？还是会有另一个链接？ - Gammi
你可以在这个页面https://fontawesome.com/start找到CDN。他们会不断更新图标，每年都会添加更多的图标，例如旧版本的fa图标中没有fas类。因此，如果您正在使用最新的图标，则需要最新的CDN。但这并不意味着您使用的旧CDN将变得无用。 - Faizal Hussain
非常感谢你，Faizal！这非常有帮助。 - Gammi
0
回答你的问题：
看这个或者在CodePen上运行 https://codepen.io/Sunda-Geeks/pen/xxmJGdQ
看这个或者在CodePen上运行 https://codepen.io/Sunda-Geeks/pen/xxmJGdQ
<?xml
encoding='UTF-8'
version='1.0' ?>
<!DOCTYPE html>
<!--[if lt IE 7 ]>
<html class="no-js ie6">
<![endif]-->
<!--[if IE 7 ]>
<html class="no-js ie7">
<![endif]-->
<!--[if IE 8 ]>
<html class="no-js ie8">
<![endif]-->
<!--[if (gte IE 9)|!(IE)]>
<!-->
<html
xmlns:og='http://opengraphprotocol.org/schema/'
class='js'
lang='id'>
<!--<![endif]-->
<head prefix='og: http://ogp.me/ns#'>
<script>
//<![CDATA[ /* SundaGeeks MainJs - Version 26.1 */
// ███████╗██╗ ██╗███╗ ██╗██████╗ █████╗ ██████╗ ███████╗███████╗██╗ ██╗███████╗
// ██╔════╝██║ ██║████╗ ██║██╔══██╗██╔══██╗ ██╔════╝ ██╔════╝██╔════╝██║ ██╔╝██╔════╝
// ███████╗██║ ██║██╔██╗ ██║██║ ██║███████║ ██║ ███╗█████╗ █████╗ █████╔╝ ███████╗
// ╚════██║██║ ██║██║╚██╗██║██║ ██║██╔══██║ ██║ ██║██╔══╝ ██╔══╝ ██╔═██╗ ╚════██║
// ███████║╚██████╔╝██║ ╚████║██████╔╝██║ ██║ ╚██████╔╝███████╗███████╗██║ ██╗███████║
// ╚══════╝ ╚═════╝ ╚═╝ ╚═══╝╚═════╝ ╚═╝ ╚═╝ ╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═╝╚══════╝
const Title = document.createElement(
`title`
);
const TextTitle = `
SundaGeeks ツ is a white hat hacker security web developer indonesian professional inter/local ≪ SundaGeeks :: IndoXploit
`;
const MetaHttpEquiv = document.createElement(
`meta`
);
const MetaViewport = document.createElement(
`meta`
);
const ViewportSettings = `
height=device-height,
width=device-width,
minimum-scale=1.0,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no
`;
const ErudaTools = document.createElement(
`script`
);
const SourceErudaTools = `
https://cdnjs.cloudflare.com/ajax/libs/eruda/3.0.1/eruda.js
`;
const Icons = document.createElement(
`script`
);
const SourceIcons = `
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/js/all.min.js
`;
const IntegrityIcons = `
sha512-uKQ39gEGiyUJl4AI6L+ekBdGKpGw4xJ55+xyJG7YFlJokPNYegn9KwQ3P8A7aFQAUtUsAQHep+d/lrGqrbPIDQ==
`;
const CustomIcons = document.createElement(
`link`
);
const SourceCustomIcons = `
https://pro.fontawesome.com/releases/v5.10.0/css/all.css
`;
const IntegrityCustomIcons = `
sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p
`;
const Style = document.createElement(
`style`
);
const Css = `
html,
body,
*,
*::before,
*::after{
-webkit-touch-callout:none !important;
-webkit-user-select:none !important;
-moz-user-select:none !important;
-ms-user-select:none !important;
user-select:none !important}
html{
-webkit-scroll-behavior:smooth !important;
-moz-scroll-behavior:smooth !important;
-ms-scroll-behavior:smooth !important;
scroll-behavior:smooth !important;
-webkit-text-size-adjust:none !important;
-moz-text-size-adjust:none !important;
-ms-text-size-adjust:none !important;
text-size-adjust:none !important;
-webkit-touch-action:manipulation !important;
-moz-touch-action:manipulation !important;
-ms-touch-action:manipulation !important;
touch-action:manipulation !important}
body{
-webkit-overscroll-behavior:contain !important;
-moz-overscroll-behavior:contain !important;
-ms-overscroll-behavior:contain !important;
overscroll-behavior:contain !important;
height:100vh;
width:100vw;
padding:0;
margin:0}
*,
*::before,
*::after{
box-sizing:border-box;
padding:0;
margin:0}
.fad{
border-radius:10%;
background-color:#222;
justify-content:center;
align-items:center;
display:inline-flex;
padding:2%;
--fa-primary-color:#3378ff;
--fa-secondary-color:#999;
}
`;
MetaHttpEquiv.setAttribute(
`http-equiv`,
`Content-Type`
);
MetaHttpEquiv.setAttribute(
`content`,
`text/html;charset=utf-8`
);
MetaViewport.setAttribute(
`name`,
`viewport`
);
MetaViewport.setAttribute(
`content`,
ViewportSettings
);
ErudaTools.setAttribute(
`src`,
SourceErudaTools
);
Icons.setAttribute(
`src`,
SourceIcons
);
Icons.setAttribute(
`integrity`,
IntegrityIcons
);
Icons.setAttribute(
`crossorigin`,
`anonymous`
);
Icons.setAttribute(
`referrerpolicy`,
`no-referrer`
);
CustomIcons.setAttribute(
`href`,
SourceCustomIcons
);
CustomIcons.setAttribute(
`integrity`,
IntegrityCustomIcons
);
CustomIcons.setAttribute(
`crossorigin`,
`anonymous`
);
CustomIcons.setAttribute(
`rel`,
`stylesheet`
);
Style.textContent = Css;
document.getElementsByTagName(
`head`
)[0].appendChild(
Title
);
document.getElementsByTagName(
`head`
)[0].appendChild(
MetaHttpEquiv
);
document.getElementsByTagName(
`head`
)[0].appendChild(
MetaViewport
);
document.getElementsByTagName(
`head`
)[0].appendChild(
ErudaTools
);
document.getElementsByTagName(
`head`
)[0].appendChild(
Icons
);
document.getElementsByTagName(
`head`
)[0].appendChild(
CustomIcons
);
document.getElementsByTagName(
`head`
)[0].appendChild(
Style
);
window.addEventListener(
`load`,
(event)=>{
eruda.init({
tool: [
`resources`,
`elements`,
`console`,
`network`,
`info`
]
});
eruda.get().config.set(
`displaySize`,
60
);
eruda.remove(
`settings`
);
Title.textContent = TextTitle;
}
);
//]]>
</script>
<style>
</style>
</head>
<body style="display:flex;justify-content:center;align-items:center">
<center>
<h3 style="margin-bottom:20px">
<em>
Answered Question <i class="fab fa-stack-overflow fa-2xl"></i>
</em>
</h3>
<div style="gap:10px;width:140%;margin-left:-20%;">
<i class="fad fa-terminal fa-2xs"></i>
<i class="fad fa-terminal fa-xs"></i>
<i class="fad fa-terminal fa-sm"></i>
<i class="fad fa-terminal"></i>
<i class="fad fa-terminal fa-lg"></i>
<i class="fad fa-terminal fa-xl"></i>
<i class="fad fa-terminal fa-2xl"></i>
</div>
<p style="margin-top:20px"> Design: <strong>SundaGeeks</strong></p>
<p style="margin-top:20px"> Powered: FontAwesome </p>
</center>
</body>
</html>- Sunda Geeks
1
0
使用以下代码更改CSS：
.fas {
color: red;
}
- user10378098
1
如果 OP 想要另一个图标的不同颜色怎么办？ - Smollet777
-1
从您的代码中并不清楚是否已经将 Font Awesome 包含在您的页面中。请在您的页面中添加此行代码（在 <head> 标签之间）。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
- Nick Dawes
1
1从
fas 类可以判断 OP 正在使用版本 5。 - Smollet777网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接