Ez page and awesome fonts loading issue's

[flappingfish]

I am currently in the process of updating my site to a new template, currently working on my testing subdomain to create an ez page with a bit of flare with the help of chatgpt, it looked fine until i tried to implement a change from basic up and down icons to awesome font ones and they refuse too display for me, i just removed the url from above the head tag for loading the icons as it is being used in the template and thought that may work as the template already uses them and then i fixed an issue in the templates viewport meta tag of an invalid separator and duplicated user scalable property incase that was the issue and to take it off the to do list.

i'm actually starting to grasp reading the flow of code as i go but this partcular issue is baffling me, hopefully someone is able to help, is there anything obvious that stands out in my code?

<style>
        /* Your existing styles */
        .clickable-section {
            margin-bottom: 20px;
            cursor: pointer;
            position: relative;
            text-align: center; /* Center text */
        }

        .section-header-image {
            width: 100%;
            height: auto;
            display: block;
            cursor: pointer;
            position: relative;
        }

        .section-header-image img {
            width: 100%;
            height: auto;
        }

        .down-arrow {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 20px;
        }

        .section-content {
            padding: 10px;
            display: none;
            text-align: left; /* Reset text alignment */
        }

        /* Style for the image link */
        .pc-builder-image {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 20px auto; /* Centers horizontally */
        }

        /* Style for the image text */
        .clickable-section .overlay-text h3 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 10; /* Increase the z-index value */
            color: white; /* Set text colour to white */
            text-align: center;
        }

@keyframes text-pulse {
    0% {
        text-shadow: 0 0 4px white;
    }
    50% {
        text-shadow: 0 0 8px white;
    }
    100% {
        text-shadow: 0 0 4px white;
    }
}

.clickable-section .overlay-text h3:hover {
    animation: text-pulse 1s infinite;
}

        .ez-page-content {
            text-align: center; /* Center all text content */
        }

.icon-toggle {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 20px;
            color: white;
            z-index: 15;
        }

.icon-plus {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust as necessary */
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    color: white; /* Change color if needed */
    z-index: 15; /* Make sure it's above other elements */
}

.icon-minus {
    position: absolute;
    top: 50%;
    right: 10px; /* Adjust as necessary */
    transform: translateY(-50%);
    font-size: 20px; /* Adjust size as needed */
    color: red; /* Change color if needed */
    z-index: 15; /* Make sure it's above other elements */
}

    </style>

    <script>
       function toggleSection(sectionId) {
            var section = document.getElementById('section-' + sectionId);
            var iconPlus = section.previousElementSibling.querySelector('.fa-plus-square-o');
            var iconMinus = section.previousElementSibling.querySelector('.fa-minus-square-o');

            if (section.style.display === 'none') {
                section.style.display = 'block';
                iconPlus.style.display = 'none';
                iconMinus.style.display = 'inline'; // or 'block'
            } else {
                section.style.display = 'none';
                iconPlus.style.display = 'inline'; // or 'block'
                iconMinus.style.display = 'none';
            }
        }
    </script>
<head>
<body>
    <div class="ez-page-content">
        <h1>Get Your Dream PC Built!</h1>

        <!-- Customized clickable sections -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(1)">
                <img src="/images/500x100x.png" alt="Image 1 Placeholder">
                <span class="fa fa-plus-square-o icon-toggle"></span>
                <span class="fa fa-minus-square-o icon-toggle" style="display: none;"></span>
                <div class="overlay-text">
                    <h3>Customize your PC with the perfect parts, your way</h3>
                </div>
            </div>
            <div class="section-content" id="section-1" style="display: none;">
                <p>With Crazygamer's PC Builder, you have the freedom to:</p>
                <ul>
                    <li>Choose the components that match your preferences and needs</li>
                    <li>Explore a vast selection of top-quality parts</li>
                    <li>Easily navigate through compatible selections</li>
                </ul>
            </div>
        </div>

        <!-- Placeholder for Section 2 -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(2)">
                <img src="/images/500x100x.png" alt="Image 2 Placeholder">
                <i class="fa fa-plus-square-o icon-toggle"></i>
                <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                <div class="overlay-text">
                    <h3>Select your desired software</h3>
                </div>
            </div>
            <div class="section-content" id="section-2" style="display: none;">
                <p>You can opt for:</p>
                <ul>
                    <li>Operating systems tailored to your requirements</li>
                    <li>Antivirus software for enhanced security</li>
                    <!-- Add more software options here -->
                </ul>
            </div>
        </div>

        <!-- Placeholder for Section 3 -->
        <div class="clickable-section">
            <div class="section-header-image" onclick="toggleSection(3)">
                <img src="/images/500x100x.png" alt="Image 3 Placeholder">
                <i class="fa fa-plus-square-o icon-toggle"></i>
                <i class="fa fa-minus-square-o icon-toggle" style="display: none;"></i>
                <div class="overlay-text">
                    <h3>Explore an amazing range of essential peripherals</h3>
                </div>
            </div>
            <div class="section-content" id="section-3" style="display: none;">
                <p>Enhance your setup with:</p>
                <ul>
                    <li>Gaming gear for an immersive experience</li>
                    <li>Productivity tools to boost efficiency</li>
                    <!-- Add more peripheral options here -->
                </ul>
            </div>
        </div>

        <p>To start creating your dream PC, <a href="https://www.instorepcbuilder.co.uk/crazygamer">access our PC Builder</a> below:</p>
        <!-- Image link to the PC builder -->
        <a href="https://www.instorepcbuilder.co.uk/crazygamer">
            <img class="pc-builder-image" src="/images/wtwbm_images/hm1-s1-b2.jpg" alt="Build Your PC" />
        </a>
        <p>Quotes are valid for 3 days, and if you need assistance, feel free to watch our tutorial or give us a call. We're here to help!</p>
    </div>
</body>
</html>