ckportfolio.com - Icons

Icons

Using FontAwesome icons

Inserting icons into our code was traditionally a time-consuming process, where we were expected to create individual images via Photoshop and implement using <img> tag. Font Awesome's innovative approach allows us to use vector-based icons as if they were part of a typeface.

The website's "Get Started" page offers a copy-and-paste entry, though you may be required to provide your email address. If you are not interested in signing up for this service, you can also to use the following code snippet offered by cdnjs.com:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

After successfully implementing the <link> tag (or <script>, based on your selection) based on the provided instructions, it is as simple as searching for an icon and copying the generated code:

Note that there is a HTML snippet that you can copy and paste into your microsite. You can also treat them as individual text characters and apply various text-specific CSS rules:

Screencast Recording

https://drive.google.com/file/d/1_8hQ7kIIQSeHoWs_-1pmoUpUJ0QDw7C9/view?usp=drive_link

(Updated October 29, 2023)

Code Sample: HTML

<!doctype html>
<html>
    <head>
        <title>Week 3</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">       
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <div id="container">
            <div id="title">
                <i class="fa fa-globe"></i> Hello world
            </div>
            <div id="content">
                <div id="content_left"></div>
                <div id="content_right">
                    <div id="video"></div>
                    <h1>Lorem ipsum</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent quis velit laoreet, scelerisque purus eu, gravida nulla. Vestibulum ornare ornare urna a ullamcorper.</p>
                    <p>Cras dapibus interdum est nec semper. Maecenas tempor elit nisl, sed ultrices orci viverra eget. Vestibulum vel volutpat tortor, sit amet fringilla nibh.</p>
                </div>          
            </div>
            <div id="menu">
                <a href="#"><i class="fab fa-facebook"></i></a>
                <a href="#"><i class="fab fa-instagram"></i></a>
                <a href="#"><i class="fab fa-twitter"></i></a>
            </div>
        </div>
    </body>
</html>

Code Sample: CSS

/* FOCUSING ON #MENU */

#menu
{
    margin-top:20px;
    text-align: right;
}

#menu a
{
    color:red;
    font-size:24px;
    margin-left:10px;
}
Fin