Font Awesome Icons are not working in HTML
Question
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:
- Disabling adblockers and reloading Pages
- Trying out different browsers.
- 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>
1 answers
solution1
1 ACCPTED 2020-08-06 14:31:18
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.