CODEWITHSUNDEEP
htmlcssiconsfont-awesome
Gammi
Gammi

Reputation: 101

How to add and change font awesome icon

I can't add Font Awesome icon on the popup. Please, help me to figure out how it works. I don't know how to add the icon and change the color in CSS.

Here is HTML

<i class="fas fa-check-circle">

Here is CSS:

.fa-check-circle {color: #ffffff;}

What's wrong? It doesn't work. I can't see the icon on the popup. Here is my pin

Upvotes: 3

Views: 20161

Answers (6)

Sunda Geeks
Sunda Geeks

Reputation: 1

ANSWERED YOUR QUESTION:

LOOK THIS OR RUN ON 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>

Upvotes: 0

M3ghana
M3ghana

Reputation: 1271

Replace this -

<i class="fas fa-check-circle">

With

<i class="fa fa-check-circle">

Upvotes: 1

Faizal Hussain
Faizal Hussain

Reputation: 1581

the problem is that you'r not using font-awesome CDN,CDN is a content delivery network which refers to a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos

In your case the classes (fas fa-check-circle) you've used are written inside the font-awesome servers .to access them you should link your webpage .To do that use the below link

<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
integrity="sha384- 
 B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
  crossorigin="anonymous">

Another way to use the fontawsome icons is to download their entire icon library which will contain their scripts and classes and linking them to your page directly

Upvotes: 1

doğukan
doğukan

Reputation: 27381

Fontawesome library not added. Add it 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

fontawesome start page

Upvotes: 7

Nick Dawes
Nick Dawes

Reputation: 2244

It isn’t clear from your code if you’ve included font awesome into your page. Add this line (between the tags) to your page.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Upvotes: -1

user10378098
user10378098

Reputation:

Change the css with this: 

.fas {
   color: red;
}

Upvotes: 0

Related Questions