Slightly off-centered buttons - html

I need these buttons to be horizontally centered within their container..as you can see, they are floating to the left. That is because I have a float: left; attribute on them.
However, when I remove the float: left; attribute and apply text-align: center; to the container, this is what happens...
Almost centered, but not quite. What's the deal? Thanks! :)
The container's CSS:
#navbar {
background: #303030;
width: 100%;
box-sizing: border-box;
text-align: center;
}
Each button's CSS:
a.button {
width: 16.3%;
background: #4d4d4d;
height: 50px;
display: inline-block;
text-decoration: none;
color: #fff;
text-align: center;
max-width: 250px;
padding-top: 12px;
box-sizing: border-box;
font-size: 145%;
transition-property: background, z-index, font-size, color;
transition-duration: 0.35s;
}
The relevant HTML
<div id ="navbar">
<i class="fa fa-home"></i> HOME
<i class="fa fa-question"></i> Q&A
<i class="fa fa-comment"></i> FORUMS
<i class="fa fa-phone"></i> CONTACT
<i class="fa fa-life-ring"></i> SUPPORT
<i class="fa fa-info-circle"></i> ABOUT
</div>
</div>

The misalignment is probably due to a space character between each link. This is a common problem when using display: inline-block;. You can remove with a couple of methods.
Method 1:
Set a negative letter-spacing. This depends on font-family and font-size, so try a couple of different values.
#navbar {
letter-spacing: -4px;
}
a.button {
letter-spacing: normal;
}
Method 2:
Remove any space/linebreaks between the links. This will of course make the code pretty unreadable.
<i class="fa fa-home"></i> HOME<i class="fa fa-question"></i> Q&A<i class="fa fa-comment"></i> FORUMS<i class="fa fa-phone"></i> CONTACT<i class="fa fa-life-ring"></i> SUPPORT<i class="fa fa-info-circle"></i> ABOUT
Method 3:
Ommit the closing </a> for all links but the last. This is still valid HTML. An <a> element will automatically close when it's followed by another <a>.
<a href="https://www.answers.legal" class="button"><i class="fa fa-home"></i> HOME
<a href="https://www.answers.legal/questions" class="button"><i class="fa fa-question"></i> Q&A
<a href="https://www.answers.legal/forums" class="button"><i class="fa fa-comment"></i> FORUMS
<a href="https://www.answers.legal/contact" class="button"><i class="fa fa-phone"></i> CONTACT
<a href="https://www.answers.legal/support" class="button"><i class="fa fa-life-ring"></i> SUPPORT
<i class="fa fa-info-circle"></i> ABOUT

Related

Make list of icons responsive with Bootstrap

I have this list of icons (fonts) lined up on the bottom of a section's page. On mobile, the line of icons overflows over on the right of that page. I would like to have 3 or 4 icons per row instead on smaller screen. I have tried multiple possibilities and the best I got was the line to be cut off (not having all icons show). Any cue would be greatly appreciated, I don't know what I'm doing wrong :-/
HTML:
<!--Skills-->
<div class="container">
<div class="icons text-center">
<ul>
<li><i class="fab fa-html5"></i></li>
<li><i class="fab fa-css3-alt"></i></li>
<li><i class="fab fa-js"></i></li>
<li><i class="fab fa-bootstrap"></i></li>
<li><i class="fab fa-sass"></i></li>
<li><i class="fab fa-less"></i></li>
<li><i class="fab fa-github"></i></li>
<li><i class="fab fa-wordpress"></i></li>
<li><i class="fab fa-adobe"></i></li>
<li><i class="fab fa-python"></i></li>
</ul>
</div>
</div>
As for CSS:
/*Skills*/
.icons {
padding: 0px 0px;
}
ul {
padding: 0;
margin: 0;
display: flex;
justify-content:space-around;
width: 700px;
margin-left: auto;
margin-right: auto;
}
ul li {
list-style: none;
font-size: 30px;
border-radius: 400px;
width: 50px;
height: 50px;
display: block;
text-align: center;
padding-top: 4px;
padding-bottom: 0px;
color: #2c3e50;
}
.icons > ul li {
flex: 1;
}
form ul li {
font-size: 15px;
width: inherit;
color: #ff0000;
text-align: left;
}
form ul {
margin-left: 0px;
margin-right: 0px;
height: 10px;
}
/*What I tried so far... some of them might be nonesense but I was desperate!*/
#media (max-width: 450px) {
.icons {
padding: 25px;
width: 25%;
flex-wrap: wrap;
position: absolute;
margin:auto;
justify-content: center;
align-items: center;
display:inline-block;
text-align: center;
overflow-x: hidden;
line-height: 1.2;
width: 100%;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
}
#media (max-width: 450px) {
.icons li {
width: 50%;
}
restructure your code to remove ul, li and let the default behavior manage this for;
working snippet below:
i {
list-style: none;
font-size: 30px;
border-radius: 400px;
width: 50px;
height: 50px;
display: block;
text-align: center;
padding-top: 4px;
padding-bottom: 0px;
color: #2c3e50;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Do you really need ul, li ?
<hr/>
<div class="icons text-center">
<i class="fab fa-html5"></i>
<i class="fab fa-css3-alt"></i>
<i class="fab fa-js"></i>
<i class="fab fa-bootstrap"></i>
<i class="fab fa-sass"></i>
<i class="fab fa-less"></i>
<i class="fab fa-github"></i>
<i class="fab fa-wordpress"></i>
<i class="fab fa-adobe"></i>
<i class="fab fa-python"></i>
</div>
You could have done something this way
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container text-center">
<span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span>
<span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span> <span style="padding:5px">
<i class="fab fa-html5"></i>
</span>
<span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span> <span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span> <span style="padding:5px">
<i class="fab fa-facebook-f"></i>
</span>
<span style="padding:5px">
<i class="fab fa-twitter"></i>
</span>
</div>

Removing Space Between Anchor Tags [duplicate]

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I'm having some troubles removing the white space between these 'social links' that I'm making.
Also I am having some troubles getting them centered correctly in the middle of the 'a' tag. I've tried using: margin: -30; or padding: -30 to try to pull the <i> tags closer to the top, which didn't work!
Why isn't this this working?
Here is my code:
#footer .footer-right {
float: right;
margin-right: 50px;
margin-top: 20px;
}
#footer .footer-right a {
height: 55px;
width: 55px;
text-align: center;
color: black;
padding: 5px 5px;
display: inline-block;
font-size: 3em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-right">
<div class="social-links">
<div class="social-row soc-row-1">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
<div class="social-row">
<i class="fa fa-stack-overflow" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>
Using display: inline-block introduces a margin between elements. Give a negative right margin to remove space.
#footer .footer-right a {
height: 55px;
width: 55px;
text-align: center;
color: black;
padding: 5px 5px;
display: inline-block;
font-size: 3em;
margin-right: -4px;
}
The amount of margin depends on the font size of the parent.
Another method is to skip the closing tag:
<a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i>
<a href="#" class="github"><i class="fa fa-github" aria-hidden="true"></i>
<a href="#" class="linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i>
.footer-right {
margin-top: 20px;
}
.footer-right a {
height: 55px;
width: 55px;
text-align: center;
color: black;
padding: 5px 5px;
display: inline-block;
font-size: 3em;
margin-right: -4px;
}
.social-row{
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer-right">
<div class="social-links">
<div class="social-row soc-row-1">
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
</div>
<div class="social-row">
<i class="fa fa-stack-overflow" aria-hidden="true"></i>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube" aria-hidden="true"></i>
</div>
</div>
</div>

Creating a 2x2 grid of Font Awesome icons and text beneath using Flexbox

I am trying to create a responsive 2x2 grid of Font Awesome icons with text beneath, both centered within their containing li element. I'm currently trying to use a method that I used when I was doing something similar with images within a list using Flexbox but it doesn't seem to work the same.
Here is my current HTML:
<section id="services">
<h2>What we do best:</h2>
<ul class="fa-ul">
<li>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-wrench fa-stack-1x fa-inverse"></i>
</span>
<p>Application Support</p>
</li>
<li>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-users fa-stack-1x fa-inverse"></i>
</span>
<p>User Training</p>
</li>
<li>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-headphones fa-stack-1x fa-inverse"></i>
</span>
<p>SharePoint Consulting</p>
</li>
<li>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-magic fa-stack-1x fa-inverse"></i>
</span>
<p>Custom Development</p>
</li>
</ul>
</section>
And CSS:
#services{
margin: 0 auto;
}
#services h2{
margin-left: 1rem;
margin-top: 0;
padding-top: 2rem;
}
#services ul{
display: flex;
flex-flow: row wrap;
}
#services li{
margin: .55rem;
font-size: .85rem;
flex-basis: calc(50% - 20px);
}
.fa-circle{
color: #30C0D8;
}
That code has gotten me here:
Will this method work for this situation or is there a better way? For some reason, as a side note, when I expand the window my 2nd column of icons moves whereas the 1st column of icons stay put. Any ideas why that would be? Here's a screenshot:
Thank you!
I think text-align: center; will help you for #services li

How to change color of Font Awesome stacked icons on hover

I'm using two Font Awesome icons:
fa-circle-thin
fa-user-plus
They are stacked on top of one another to give a circle icon look.
<span class="fa-stack fa-sm">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-user-plus fa-stack-1x "></i>
</span>
When I hover over I want the circle to be filled in black and the fa-user-plus to change to white. How can I achieve this?
See JSFiddle: http://jsfiddle.net/ReturnOfTheMac/Lwdaen75/
To achieve the desired effect, add a fa-circle icon to the stack that will be transparent on display (opacity:0.0) and solid (opacity:1.0) on :hover.
For example (also on JSFiddle: http://jsfiddle.net/2hxxuv52/5/):
HTML
<span class="fa-stack fa-sm">
<i class="fa fa-circle fa-stack-2x "></i>
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-user-plus fa-stack-1x "></i>
</span>
CSS
.fa-stack .fa { color: black; }
.fa-stack .fa.fa-circle-thin { color: black; }
.fa-stack .fa.fa-circle { opacity:0.0; color:black; }
.fa-stack:hover .fa.fa-user-plus { color: white; }
.fa-stack:hover .fa.fa-circle-thin { color: black; }
.fa-stack:hover .fa.fa-circle { opacity:1.0 }

border radius not work for fa-stack in font awesome

I add fontawesome icon with square this worked for me:
HTML:
<ul class="list-inline">
<li><a href="#">
<span class="fa-stack fa-lg icon-facebook">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a></li>
<li><a href="#">
<span class="fa-stack fa-lg icon-twitter">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a></li>
<li><a href="#">
<span class="fa-stack fa-lg icon-gplus">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x"></i>
</span>
</a></li>
</ul>
CSS:
.fa-stack-1x {
color:white;
border-radius:0;
}
.fa-square{
border-radius:0;
}
.icon-facebook {
color:#3b5998;
}
.icon-twitter {
color:#00aced;
}
.icon-gplus{
color:#dd4b39;
}
body {
background-color: black;
}
I need to show square without border radius and I add border-radius:0; for class .fa-square But font awesome not work without border radius.
how do can i fix this ?
DEMO JSFIDDLE
As others mentioned the "square" behind the icon is actually a font icon applied to .fa-square:before in the css.
Unfortunately the Font Awesome set at this time does not contain a true square.
However they do have an icon in their set with much harder corners called the "stop" icon (in the video player icon group). You can substitute this for the "square" in your css to get a much better square stack by doing this. It does make a very slight radius corner, but at small sizes it's hardly noticable:
.fa-square:before {
content: "\f04d";
}
"\f04d" is the CSS content value for the stop icon in Font Awesome.
List of CSS content values for Fontawesome Icons
http://astronautweb.co/snippet/font-awesome/
Results
Image of results
Cheers!
fa-square:before{content:"\f0c8"} is going to cause an issue. You can fix it by removing that class. Then overriding the border-radius for each of the fa-stack-1x icons.
<ul class="list-inline">
<li><a href="#">
<span class="fa-stack fa-lg icon-facebook">
<i class="fa fa-facebook fa-stack-1x"></i>
</span>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg icon-twitter">
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
</a>
</li>
<li><a href="#">
<span class="fa-stack fa-lg icon-gplus">
<i class="fa fa-plus fa-stack-1x"></i>
</span>
</a>
</li>
</ul>
CSS:
body {
background-color: black;
}
.fa-stack-1x {
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
border-radius: 18px;
color:white;
}
.icon-facebook>.fa-stack-1x {
background-color:#3b5998;
}
.icon-twitter>.fa-stack-1x {
background-color:#00aced;
}
.icon-gplus>.fa-stack-1x {
background-color:#dd4b39;
}
For squares just change the border-radius's to 0px; in the above CSS
I looked into font-awesome.min.css and found this line: fa-square:before{content:"\f0c8"} I believe that means you are using \f0c8 to draw the square. That means it is a character from awesome font and you can't change it by border-radius.
You can read about this icon at
http://www.utf8icons.com/character/61640/UTF-8-character