I am having a problem with font-awesome icons. When you click on the little plus it is fine however if you click on the rest of the button it will not take you to the link.
<div class="jumbotron">
<p>
<button type="button" class="btn btn-default pull-right">
<i class="fa fa-plus" title="Edit"></i> </button>
</p>
http://jsfiddle.net/py7vA/217/
How would I fix this?
Don't put an A tag inside BUTTON. It's wrong. Since you are using Bootstrap you can assign the same btn classes to A too.
<i class="fa fa-plus"></i>
You can do a couple different things one is what Ibrahim mentioned or:
<div class="jumbotron">
<p>
<i class="fa fa-plus btn btn-default pull-right" title="Edit"></i>
</p>
</div>
Related
I want to add the Back and Next buttons at the bottom of the screen with a fixed position. For my code, the button moves to the top/bottom of the screen if I change the screen size (I have attached the screenshot for both). Please check my code and help me solve this.
Code
<div id="text-area">
<p class="mb-4">
<strong>Textarea</strong>
</p>
<textarea></textarea>
<p class="d-flex justify-content-between">
<button class="btn btn-link button" id="back">
<i class="fa fa-long-arrow-alt-left me-3"></i>
Back
</button>
<button class="btn btn-link button" id="next">
Next
<i class="fa fa-long-arrow-alt-right ms-3"></i>
</button>
</p>
</div>
This solved my problem. Thanks all for your time. Happy coding.
<div class="d-flex flex-column flex-grow-1" id="text-area">
<div class="flex-grow-1">
<p class="mb-4">
<strong>Textarea</strong>
</p>
<textarea></textarea>
</div>
<p class="d-flex justify-content-between">
<button class="btn btn-link button" id="back">
<i class="fa fa-long-arrow-alt-left me-3"></i>
Back
</button>
<button class="btn btn-link button" id="next">
Next
<i class="fa fa-long-arrow-alt-right ms-3"></i>
</button>
</p>
</div>
I would like to place an icon between two buttons. The icon is larger than the buttons and I would like their centers to be on a line. This means that the icon is a bit above and below the buttons.
A simple way to do this is a button group. Unfortunately, the icon is rounded off and buttons in a button group have sharp edges to neighbours in the group and the icon is rescaled to the same size as the buttons:
So I tried to get rid of the button-group. Bootstrap has an align-middle class for vertical alignment. But I can't get this to work. It looks like this:
I browsed and found this: How to center an element horizontally and vertically?
The answer lists a variety of approaches. I would like to stick with bootstrap and avoid custom css as far as possible. But one of the options sounded really good to me: Using justify and align in a flexbox container. Bootstrap containers are flexboxes, so I wrapped my buttons in a container and added align-items: center; justify-content: center;. Same result as the align-middle picture above.
I tried a variety of other css combinations, without any success. The three approaches above seem the cleanest to me, so I presented them here.
A fiddle: https://jsfiddle.net/aq9Laaew/285443/
html (assuming that you have bootstrap and fontawesome):
<!-- using a flexbox container + css -->
<div class="container" style="align-items: center; justify-content: center;">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
<br>
<!-- using the bootstrap align-middle class -->
<div class="align-middle">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
<br>
<!-- using a button group -->
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle" style="color:red;"></i>
</button>
<span><i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i></span>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle" style="color:green;"></i>
</button>
</div>
Potential duplicates (this is a very common question):
Bootstrap vertical align The answer works on a grid of rows and cols. I prefer not to introduce a grid.
Vertically align elements using CSS No answer has been accepted and the hints are similar to the answer I included in the main text.
Not 100% sure on what you want but if you want to align the buttons, then you can also use bootstrap flexbox and bootstrap text color instead of additional styling: (Edited: align-self-center vs align-items-center)
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-start align-items-center">
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-times-circle text-danger"></i>
</button>
<i class="far fa-question-circle fa-5x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary">
<i class="far fa-check-circle text-success"></i>
</button>
</div>
<br/>
<div class="d-flex justify-content-start">
<button type="button" class="btn btn-outline-secondary align-self-center">
<i class="far fa-times-circle text-danger"></i>
</button>
<i class="far fa-question-circle fa-4x" style="color: lightskyblue"></i>
<button type="button" class="btn btn-outline-secondary align-self-center">
<i class="far fa-check-circle text-success"></i>
</button>
</div>
I am having problems a bootstrap button to work. We are making a site that allows people to vote up or down on various items.
The vote-up button works, however the vote-down doesn't. When I hover over the vote-down button it doesn't
Here is the HTML.
<div class="content-left-sidebar-meta">
<div class="post-vote-header">
<a class="btn btn-default post-vote post-vote-up" data-post-id="90" href="http://localhost/wp/tag/top-10-fastest-cars/#vote-up" title="Like">
<i class="fa fa-chevron-up"></i></a>
<div class="vote-count">0</div>
<a class="btn btn-default post-vote post-vote-down" data-post-id="90" href="http://localhost/wp/tag/top-10-fastest-cars/#vote-down" title="Dislike">
<i class="fa fa-chevron-down"></i></a>
</div>
</div>
I try to put this HTML into my page content using dashboard:
<div>
<p class="text-center">
<a class="btn btn-large btn-light" title="Kontakt" href="/?page_id=20">Kontakt <i class="fa fa-phone"></i></a>
<a class="btn btn-large btn-light" title="Standorte & Informationen" href="/?page_id=20">Standorte &
Informationen <i class="fa fa-globe"></i></a>
</p>
</div>
But here is the HTMl what I getting on page:
<div>
<p class="text-center">
<a class="btn btn-large btn-light" title="Kontakt" href="/?page_id=20">Kontakt <i class="fa fa-phone"></i></a>
</p>
<p>
<a class="btn btn-large btn-light" title="Standorte & Informationen" href="/?page_id=20">Standorte &<br />
Informationen <i class="fa fa-globe"></i></a>
</p>
</div>
See the difference? So why it genereates two <p>, and first has the class what I assing? Maybe it my mistake and I didnt get something with WordPress?
wpautop might be active and insert the second p if you have a double line-break in the code you enter.
Try removing the empty line between the two a-elements and it should work.
It has to do with Wordpress default formating filter
Place this in your functions.php
remove_filter( 'the_content', 'wpautop' );
I am trying to vertical-align the text in a button with a font awesome icon. This is the code I tried:
<button class="btn btn-primary"><span style="padding-top: -50px;">Sign in with</span>
<i class="fa fa-linkedin-square" style="font-size:3em;"></i></button>
Fiddle: http://jsfiddle.net/koh8jkyb/
line-height is also not working. What's the problem here?
just use vertical-align:middle with the icon
try this
<button class="btn btn-primary">
<span style="padding: 10px;display: block;float: left;">Sign in with</span>
<i class="fa fa-linkedin-square" style="font-size:3em;float: right;"></i>
</button>
http://jsfiddle.net/koh8jkyb/4/
Try this:
CSS :
.center-content {
display:table-cell;
vertical-align:middle;
}
HTML:
<button class="btn btn-primary">
<span class="center-content">Sign in with</span>
<span class="center-content">
<i class="fa fa-linkedin-square" style="font-size:3em;"></i>
</span>
</button>
Use style="font-size:3em;vertical-align:middle;"
Check out the running code at http://jsfiddle.net/koh8jkyb/