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>
Browser View
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.
Related
The background and the padding are not applying and the css is not overriding the bootstrap style and when i keep the container style the css display style is not applied.
check the below code:
body{
background-color: #f5d9d5;
font-family: 'Nunito' , sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<title>Document</title>
</head>
<body>
<div class="tcontainer bg-light p-2">
<img src="data:image/.." alt="">
<h4>ping pong score keeper</h4>
<div class="panel ">
<h3><span class="p1">0</span> to <span class="p2">0</span></h3>
<p>Use the buttons below to keep score</p>
<h4>playing to
<select class="form-select" aria-label="Default select example">
<option value="3">3</option>
<option value="5">5</option>
<option value="9">9</option>
<option value="12">12</option>
</select></h4>
</div>
<button>P1 +1</button>
<button>P2 +2</button>
<button>Reset</button>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
how the website appears
Try adding !important to the background-color css property. Your CSS property is getting overwritten. adding !important should make the results look like follows:
body{
background-color: #f5d9d5 !important;
font-family: 'Nunito' , sans-serif;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<title>Document</title>
</head>
<body>
<div class="tcontainer bg-light p-2">
<img src="data:image/.." alt="">
<h4>ping pong score keeper</h4>
<div class="panel ">
<h3><span class="p1">0</span> to <span class="p2">0</span></h3>
<p>Use the buttons below to keep score</p>
<h4>playing to
<select class="form-select" aria-label="Default select example">
<option value="3">3</option>
<option value="5">5</option>
<option value="9">9</option>
<option value="12">12</option>
</select></h4>
</div>
<button>P1 +1</button>
<button>P2 +2</button>
<button>Reset</button>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
Link the Css
<link rel="stylesheet" href="css/style.css">
Then try to refresh the
The bg-light class you are trying to apply to tcontainer is not working since the version of bootstrap that you are using here i.e. bootstrap 3.4.1 does not contain a definition for bg-light and bg-dark. Try updating the bootstrap version, since I don't see a mistake in the code itself.
I found the below code from the website mentioned below after my two-days search for a bootstrap datepicker for my website. Being a newbie I do not know how to implement but I gave it a try, however, I did not get the result as expected, I got only an inputfield but no datepicker. Can somebody help me implement the code?
I create a test.html file in my project and added the below code to test.
NOTE: This is the only code I have for datepicker.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Test Site</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous"> -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
<body>
<div class="container my-4">
<div class="md-form">
<input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
</div>
</div>
<script>
// Data Picker Initialization
$('.datepicker').pickadate();
</script>
</body>
</html>
Source of the code
In your input tag with id=date-picker-example replace type field with "date". I mean the code of your input field will be like this.
<input placeholder="Selected date" type="date" id="date-picker-example" class="form-control datepicker">
I hope this solves your problem.
I want to integrate a multiselect dropdown list in my web page. But the list does not show the dropdown menu when click.The dropdown displays its menu if i remove bootstrap.min.css from head tag, but the menus not aligned well.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Money Withdrawal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-
select.min.css">
<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/gijgo#1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo#1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript">
$(function () {
$('.selectpicker').selectpicker();
});
</script>
</head>
<body>
<div class="row">
<div class="col-lg-6 mx-auto">
<label class="text-white mb-3 lead">Where do you live?</label>
<!-- Multiselect dropdown -->
<select multiple="" class="selectpicker" id="exchange_p" tabindex="-98">
<option>BSE</option>
<option>NSE</option>
<option>NCDEX</option>
<option>MCX</option>
<option>NSDL</option>
<option>ICEX</option>
</select>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap- select.min.js">
</script>
</body>
</html>
please could you assist with printing a dropdown selection value when using the Print.js Javascript Library, the original selection remains and it does not dynamically change when you get the print window...
https://codepen.io/markchavush/pen/WWrWda
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>Your page title here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body>
<!-- Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container">
<form method="post" action="#" id="printJS-form">
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test#mailbox.com" id="exampleEmailInput">
</div>
<div class="six columns">
<label for="exampleRecipientInput">Reason for contacting</label>
<select class="u-full-width" id="exampleRecipientInput">
<option value="Option 1">Questions</option>
<option value="Option 2">Admiration</option>
<option value="Option 3">Can I get your number?</option>
</select>
</div>
</div>
<label for="exampleMessage">Message</label>
<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
</form>
<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection', css: 'https://cdnjs.cloudflare.com/ajax/libs/skeleton-framework/1.1.1/skeleton.min.css' })">
Print Form with Header
</button>
</div>
<!-- End Document
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>
</body>
</html>
Please go directly to the codepen and press the print button to see that the dropdown list value does not appear correctly in the printout...
Cheers
Mark
You can't, not with the Print.js library.
The problem you're facing is a known issue - there was an issue created on their GitHub repo detailing this exact issue back in 2018. (That issue was merged to this open issue instead, since apparently it's the same problem). The original GitHub issuer even created a JSFiddle demoing the same problem you show in your codepen.
My only recommendation would be to attempt to implement something similar to this answer, though I won't pretend it will be easy.
I am developing a web application with Materialize and I need to use date but the label text is on of the input, How can I resolve it?
It is all the simple code:
<!DOCTYPE html>
<html>
<head>
<!-- Compiled and minified CSS -->
<!-- Compiled and minified JavaScript -->
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--Import jQuery before materialize.js-->
<div class="input-field col m6">
<i class="material-icons prefix">picture_in_picture</i>
<input id="hello_id" type="date"/>
<label for="hello_id">Hello, this text is a test</label>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
</body>
</html>
Thank you!