I am implementing the following code which is present here in my aspx page. But I am not getting the output(i.e., I want to use glyph icons to my button). Can you please help me out.
actual code in site:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
I have implemented that in my aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="bootstrap.css" rel="stylesheet" />
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</head>
<body>
<form id="form1" runat="server">
<span class="glyphicon glyphicon-search"></span>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span> Star
</button>
</form>
</body>
</html>
Related
So the code below didn't work because the class="btn btn-action hide" is not recognized by the system because it is a custom built class by Firestore rather than a default built-in class in CSS. If that is the case, what should I install to make it work because I've already tried installing everything from Firebase and it still does not work?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<script
src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-action">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary">
Sign Up
</button>
<button id="btnLogout" class="btn btn-action hide">
Log out
</button>
</div>
<script src="app.js"></script>
</body>
</html>
In the youtube example you've shown, it does not show you the css file. But I think it's using bootstrap from identifying the class name, here is what you can try:
Copy-paste the stylesheet link into your head before all other stylesheets to load our CSS.
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js"></script>
</head>
Please do note this is CDN, you can also download bootstrap yourself and add the file from your local path.
Update, the youtube video is using custom css that looks like bootstrap but it's not...to use bootstrap classes for button, see below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Firebase Web Quickstart</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script
src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-primary">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary">
Sign Up
</button>
<button id="btnLogout" class="btn btn-danger" hidden>
Log out
</button>
</div>
<script src="app.js"></script>
</body>
</html>
These are the classes you can use:
https://getbootstrap.com/docs/4.0/components/buttons/
just use the firebase.auth().onAuthStateChanged will get similar purpose with out using bootstrapcdn but at first have to get document element id like below:
const txtEmail = document.getElementById('txtEmail');
const txtPassword = document.getElementById('txtPassword');
const btnLogin = document.getElementById('btnLogin');
const btnSignUp = document.getElementById('btnSignUp');
const btnLogout = document.getElementById('btnLogout');
firebase.auth().onAuthStateChanged(firebaseUser => {
if (firebaseUser) {
console.log(firebaseUser);
btnSignUp.style.display = "none";
} else {
console.log('not logged in');
btnLogout.style.display = "none";
}
})
I would like to have icons instead of text on the submit buttons in the forms of my website based on w3.css.
I can easily add icons to other buttons but not to the submit buttons.
This is how far I could come:
The blue "save" button is the submit one. The green cancel button is a separate button that provides me a way to "cancel" (go back) via an href. I would like the submit button to look like the green save button, but alas I haven't found a way to replace the "save" text with a save icon (with no text).
I'm using google material icons but could use FontAwesome as well. Here's my html code:
<html>
<title>FPP</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link type="text/css" rel="stylesheet" href="/stylesheets/w3.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container">
<header class="w3-container w3-blue">
<h1>Test</h1>
</header>
<div class="w3-bar w3-gray">
<i class="material-icons">home</i></button>
</div>
<br>
<form class="w3-container w3-card-8" action="/test" method="post">
<label class="w3-text-blue"><b>Test ID</b></label>
<input value="" name="test1" class="w3-input w3-border">
<br>
<label class="w3-text-blue"><b>Test Description</b></label>
<input value="" name="test2" class="w3-input w3-border">
<br>
<input class="w3-btn w3-blue" type="submit" value="save">
<i class="material-icons">save</i>
<i class="material-icons">cancel</i>
</form>
</div>
</body>
</html>
Any suggestons will be welcome :-)
Replace
<input class="w3-btn w3-blue" type="submit" value="save">
with
<button type="submit" class="w3-bar-item w3-button w3-green"><i class="material-icons">save</i></button>
You can use button for that, just wrap it in form and add action="#" to go to your page.
<form action="gothere.html">
<button type="submit" class="w3-btn w3-blue">
<i class="fa fa-id-badge" aria-hidden="true"></i>
</button>
</form>
I have an issue with adding glyphicon icon to a submit button. Once I try it with "a" tag, the action did not work when I press the button. So how do I do it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form method="post" action="<%=Const.ActionURIs.INSTRUCTOR_COURSE_STUDENT_LIST_DOWNLOAD%>" style="display:inline;">
<input id="button_download" type="submit" class="btn btn-primary"
name="<%=Const.ParamsNames.FEEDBACK_RESULTS_UPLOADDOWNLOADBUTTON%>"
value=" Download Student List ">
<input type="hidden" name="<%=Const.ParamsNames.USER_ID%>" value="${data.account.googleId}">
<input type="hidden" name="<%=Const.ParamsNames.COURSE_ID%>" value="${courseDetails.course.id}">
</form>
</body>
</html>
Use a <button> tag instead of an <input> tag. Change your button like this:
<button type="submit" class="btn btn-primary" id="button_download" name="<%=Const.ParamsNames.FEEDBACK_RESULTS_UPLOADDOWNLOADBUTTON%>">
<span class="glyphicon glyphicon-download-alt"></span> Download Student List
</button>
The reason it doesn't work is given on Bootstrap website.
Don't mix with other components : Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested <span> and apply the icon classes to the <span>.
Working example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-download-alt"></span> Download Student List
</button>
</form>
I've got an odd one here guys, all I've done is include a standard YouTube subscribe button on a Bootstrap 3 modal box and on Firefox 45.0.2 the tooltip goes crazy and flashes over and over (on and off) incrementing its z index over and over again.
I've created a fiddle to demonstrate the problem.
https://jsfiddle.net/djhxLk59/1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Youtube Subscribe Bootstrap 3 Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" onclick="; return false;" data-toggle="modal" data-target="#myModal">
Launch demo modal using data-toggle
</button>
<button type="button" class="btn btn-primary btn-lg" onclick='$("#myModal").modal("show"); return false;'>
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>This is a test to show how the Youtube Subscribe button doesn't work on Firefix</p>
<script src="https://apis.google.com/js/platform.js"></script>
<p><span id="youtube-follow-circle"></span>Subscribe on <span>YouTube</span>
<br />
</p>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel="britneyspears" data-layout="default" data-count="default"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
You can see here that when you hover over the YouTube button the tooltip goes nuts.
This jsfiddle works fine on Chrome, Safari and Opera.
Interestingly, when I open the modal as soon as the page is loaded, as in this example:
https://jsfiddle.net/od4eo13m/
<script type="text/javascript">
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
then the YouTube tooltip works fine!
I am so confused here, it's driving me nuts.
Would love any hints please.
Kind regards, Jason.
i have a problem with difference in render html between IE9 and Chrome.
I reviewed all urls of .js and .css and are fine. All files were downloaded from the official website.
This pic is from IE9
This pic is from Chrome
This is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="public/assets/ico/favicon.png" />
<title>SMG</title>
<!-- Bootstrap core CSS -->
<link href="public/dist/css/bootstrap.css" media="all" rel="stylesheet" type="text/css" />
<link href="public/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="navbar.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="public/assets/js/html5shiv.js"></script>
<script src="public/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">SMG</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" id="dni" data-container=".form-group" data-toggle="popover" data-content="" data-placement="bottom" placeholder="Numero" class="form-control">
</div>
<div class="form-group">
<input type="password" id="password" data-container=".form-group" data-toggle="popover" data-placement="bottom" data-content="Ingrese su Contraseña" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<select class="selectpicker" data-width="200px" title="Tipo de Documentacion" data-style="btn-inverse">
<option data-hidden="true"></option>
<option value="DU">DNI</option>
<option value="LC">LC</option>
<option value="LE">LE</option>
<option value="PA">PA</option>
</select>
</div>
<div class="form-group">
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-success btn-xs">Ingresar</button>
<button type="submit" id="signIn" onsubmit="return false;" class="btn btn-danger btn-xs">Registrarse</button>
</div>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
<br/>
<div class="alert alert-block alert-danger " style="display: none">
<button type="button" class="close" aria-hidden="true">×</button>
<h4></h4>
</div>
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
</div>
</div> <!-- /container -->
<script src="public/js/jquery.js"></script>
<script src="public/dist/js/bootstrap.min.js"></script>
<script src="public/js/bootstrap-select.min.js"></script>
</body>
</html>
dont know why. Can anyone lend me a hand? Thank you!