I want to add google play and apple icons with the download button
the apple icon works fine but the google play doesn't show and i don' know why
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>Meet new and interesting dogs nearby.</h1>
<button type="button" class="btn btn-dark btn-lg"><i class="fa fa-apple"></i>Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i>Download 2</button>
Just replace the link with the following:
Your code will work just fine.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
Cause you're using fontawsome version 4.7.0 and the google play icon is version 5.0.0. Here is the correct code you must use instead.
You must also change the class of the apple icon to fab fa-apple cause it's for version 5.8.0 of fontawsome.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<h1>Meet new and interesting dogs nearby.</h1>
<!-- <button type="button" class="btn btn-dark btn-lg"><i class="fa fa-apple"></i>Download</button> -->
<button type="button" class="btn btn-dark btn-lg"><i class="fab fa-apple"></i>Download</button>
<button type="button" class="btn btn-outline-light btn-lg"><i class="fab fa-google-play"></i>Download 2</button>
Related
I have a button group but the middle button is a link so it should b a tag (i can change its button and use js to navigate but I prefer not to )
here is the code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner">
<button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
center
<button type="button" class="btn btn-warning yekan ">up <i class="mdi mdi-arrow-up-bold"></i> </button>
</div>
here is the result
as you can see the middle btn has a border and gradient, how can I change it so it would look like buttons? i've tried adding border:none to all .btn and button group it didn't work
Simply remove type=button from the a
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="btn-group nospiner" >
<button type="button" class="btn btn-warning yekan create-wallet"><i class="mdi mdi-arrow-down-bold"></i> down</button>
<a href="link.php" class="btn btn-warning yekan pjax" > center</a>
<button type="button" class="btn btn-warning yekan " >up <i class="mdi mdi-arrow-up-bold"></i> </button>
</div>
I would like to create an icon for multi file upload using bootstrap-4.
I have referred this below code for single file upload >
but, how to create an icon for multi file upload
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/
jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/
3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Upload Glyph</h2>
<p>Upload icon: <span class="glyphicon glyphicon-upload"></span></p>
<p>Upload icon as a link:
<a href="#">
<span class="glyphicon glyphicon-upload"></span>
</a>
</p>
<p>Upload icon on a button:
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-upload"></span> Upload
</button>
</p>
<p>Upload icon on a styled link button:
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-upload"></span> Upload
</a>
</p>
<p>Unicode:
<span class="glyphicon"></span>
</p>
</div>
this is the icon, it produced, but how can I make it as multifileupload ?
SINGLE-file-upload-icon
Bootstrap 4 doesn't include an icon font like it did in version 3. This leaves people free to choose whichever icon font they want to use.
From your code it looks like you're using Bootstrap 3 though. All of the available icons are listed in their documentation. Just replace the glyphicon-upload class with the class for the icon you want to use (for instance, glyphicon-open).
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-open"></span> Multi upload
</button>
Alternatively, rather than trying to create a new icon yourself, you can use two and change their positioning to give the appearance of a single icon:
.btn .glyphicon + .glyphicon {
margin-left: -5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-arrow-up"></span><span class="glyphicon glyphicon-arrow-up"></span> Multi upload
</button>
I'm using Bootstrap 3 and I have a line of buttons. One of them is a <a> button, or: <a class='btn btn-default' role='button'>Button here</a>; the rest are <button> elements with the same classes.
I was expecting to have them all correctly aligned and spaced, as seen in Bootstrap's examples, however, the result was this:
As you can see, the first button, the one specified as <a> doesn't have the right margin with the next button. What can be causing this?
Here's my HTML:
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
The anchor tags and buttons are correctly spaced because they are inline-block- not sure how there is no spacing between the a and the button you got over there.
Try floating them and then you can remove the space between them if you want to- and set the required margin if needed.
They must be correctly aligned and spaced by default- see below snippet:
a.btn, button.btn {
margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
See what happens when we float them:
a.btn, button.btn {
margin: 0;
float: left;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<body>
<a class="btn btn-default" role="button">
<i class="fa fa-download" aria-hidden="true"></i> Download Image
</a>
<button class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit Title
</button>
<button class="btn btn-default">Export</button>
<button class="btn btn-danger">Delete</button>
</body>
I have added a a button and Styled it using Bootstrap but the icon(Font) of the button is not as per the styling.I am not able to figure out what is missing in the Markup..Here is the HTML..
<button class="btn-u btn-u-xs btn-brd btn-brd-hover" type="button" title="Add New" data-toggle="modal" data-target="#responsive" onclick="">
<i class="fa fa-plus"></i>
<span class="hidden-xs hidden-sm">Add New</span>
</button>
Please help me to resolve this .Thanks
Bootstrap doesn't include the fa fa icons. put this in your head and you're good to go
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
Thanks for taking the time.
I implemented css bootstrap and got a nice fixed menu on top of my one page scrolling website. Just to make sure users instinctively see the navigation, I copied the menu below the header as well. Works well on every browser I have but IE 10.
Here's the code:
<div class="text-center">
<button type="button" class="btn btn-default btn-info">
123123
</button>
<button type="button" class="btn btn-default btn-warning">
13132123
</button>
<button type="button" class="btn btn-default btn-danger">
12313123
</button>
<button type="button" class="btn btn-default btn-success">
ЗА 132123123
</button>
<button type="button" class="btn btn-default btn-info">
12312313
</button>
<button type="button" class="btn btn-default btn-warning">
123123123
</button>
</div>
The div's are named like this:
<div class="news-holder cf" id="news">
They are closed and everything. I am completely new to web design so I don't know what's happening. It's bizarre.
As stated by #recursive a link should not be in a button.
Further more if this is a menu you most certainly should not be using button and avoid inline styles.
also check that you have div's on page with the id of news, articles etc.
if you need further assistance please supply more of your code.
try this.
<nav>
<ul class="text-center">
<li class="btn btn-default btn-info">
123123
</li>
<li class="btn btn-default btn-warning">
13132123
</li>
<li class="btn btn-default btn-danger">
12313123
</li>
<li class="btn btn-default btn-success">
ЗА 132123123
</li>
<li class="btn btn-default btn-info">
12312313
</li>
<li class="btn btn-default btn-warning">
123123123
</li>
</ul>
</nav>
<a> elements are not allowed inside of <button> elements.
http://www.w3.org/TR/html5/forms.html#the-button-element
there must be no interactive content descendant.
That's likely to be related to the problem. Since anchors have been well supported for decades.