i cant seem to load fonts using the unicodes

by

when i load a default icon(box) is loaded in placement of the icon i wish to use(a searchbox).

The icon i am using is from fontawsome and its my first time using it. I tried using google fonts and got the unicode from their ssite along with the link (i added it to the header) and it does not work. which means the prolem may be with my code or perhaps the browser or visual studio code but im not sure. going back to font awsome i tried other unicodes(random ones) and the icons apeared, but when i usee unicode for the search icon it doesnt appy. the reason im using the unicode is because its more faster and takes less effort. plus im trying to use it in a place holder in a search widget. u can see in the below code.

<!DOCTYPE html>
<html>
<head>

    <script src="https://kit.fontawesome.com/49457cc726.js" crossorigin="anonymous"></script>
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
        

        li, a, button {
            font-family: "Montserrat";
            font-weight: 500;
            font-size: 12px;
            color: rgb(255, 255, 255);
            text-decoration: none;
        }

        header {
            border-radius: 8px;
            background-color: rgb(167, 75, 52);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
        }

        .logo {
            cursor: pointer;
            width: 100px;
        }

        .nav_links {
            list-style: none;
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
        }

      
        .nav_links li {
            margin-right: 20px;
            position: relative;
        }

        .nav_links a{

            transition: all 0.5s ease ;
            position: relative;
        


        }
 

        .nav_links li a:hover{

              color: rgb(197, 180, 21);
             

        }

        .nav_links  a::before{

            content: "";
            height: 3px;
            width: 0%;/* start with 0% width*/
            background: rgb(255, 0, 0);;
            position: absolute;
            left: 50%;/*start from centre*/
            transform: translateX(-50%);
            bottom: -8px;
            opacity: 0;
            transition: opacity 0.3s, width 0.3s;
            pointer-events: none;
            

        }

        .nav_links a:hover::before{
            
            width: 100%;
            opacity: 1;
        }
 

        .cta button {
            cursor: pointer;
            border-radius: 8px;
            background-color: rgb(71, 71, 71);
            color: #ffffff;
            padding: 8px 20px;
            border: none;
        }

        .cta

        .nav_links, .cta {
            display: flex;
            align-items: center;
        }


        .cta button:hover{

            transition: all 0.5s ease ;
            background-color: rgb(255, 0, 0);


        }

.search{

    border-radius: 5px;
    border: none;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.7);
    padding: 5px 30px;
    outline: none;
}




    </style>
</head>
<body>
    <header>
        <img class="logo" src="redfox symbol only color.png" alt="logo">

        <h1></h1>
        <input type="search" class="search" placeholder="&#xf002 search movie">
        <div class="nav_links">
            <li><a href="#">Upcoming</a></li>
            <li><a href="#">Top 5</a></li>
            <li><a href="#">recomended</a></li>
            <li><a href="#">Genre</a></li>
            <li><a href="#">rate tour</a></li>
        </div>
        <div class="cta">
            <button>About</button>
        </div>
    </header>

</body>
</html>

  • Are you hoping to have the U+F002 displayed in that font? You have the font applied to li, a, and button, but you are using it in an input tag.

    – 

  • theres no poblem if the font is applied to it, as long as the icon shows. which its not

    – 

  • I don’t know what you mean by that. U+F002 is a private character and does not exist in most fonts. If you have a font where it does exist, then you need to make sure that your <input> tags are styled with that font. Otherwise, nothing is going to show.

    – 

Try to use <meta charset="UTF-8"/> in your <head>

Leave a Comment