CODEWITHSUNDEEP
htmlcssiconsfont-awesome
Data Tank
Data Tank

Reputation: 15

Font Awesome Icons are not working in HTML

I've been working on a Javascript To-Do app and included some icons from Font Awesome. But they're just not showing up. So far I've tried:

  1. Disabling adblockers and reloading Pages
  2. Trying out different browsers.
  3. Removing CDN and using Font Awesome CSS itself in the project.

I've already googled regarding this problem double-checked my CDN link, checked the recent documentation and everything seems alright. What did I do wrong?

I have attached the HTML Code Snippet and the screenshot from the browser below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300&family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>To do List</title>
</head>
<body>
    <header>
        <h1>My todo list</h1>
    </header>
    
    <form>
        <input type="text" class="todo-input">
        <button class="todo-button" type="submit">
            <i class="fas fa-user-md"></i>
        </button>
        <div class="select">
            <select name="todos" class="filter-todo">
                <option value="all">All</option>
                <option value="completed">Completed</option>
                <option value="uncompleted">Uncompleted</option>
            </select>
        </div>
    </form>

    <div class="todo-container">
        <ul class="todo-list"></ul>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

Browser View

Upvotes: 1

Views: 1769

Answers (1)

Debsmita Paul
Debsmita Paul

Reputation: 1460

Change fas fa-user-md to fa fauser-md and add it directly to button.

Like so -

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Poppins:wght@300&family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>To do List</title>
</head>
<body>
    <header>
        <h1>My todo list</h1>
    </header>
    
    <form>
        <input type="text" class="todo-input">
        <button class="todo-button fa fa-user-md" type="submit">
        </button>
        <div class="select">
            <select name="todos" class="filter-todo">
                <option value="all">All</option>
                <option value="completed">Completed</option>
                <option value="uncompleted">Uncompleted</option>
            </select>
        </div>
    </form>

    <div class="todo-container">
        <ul class="todo-list"></ul>
    </div>
    
    <script src="app.js"></script>
</body>
</html>

Edit: fas, far etc is supported in Font Awesome 5 and above. The version is used in this example is 4.7.0 which is supports fa.

Upvotes: 1

Related Questions