I have created a quick & dirty simple website with Bootstrap 3 & Fontawesome . Everything looks good except when on mobile (phone) and the phone is in landscape (rotated). I am seeing a weird right hand clipping (see below) on two of the four Font Awesome Icons. I have tested it on several different browsers / mobile phones, with all the same results.
correct
incorrect - with clipping
<div class="row rowpad">
<div class="col-sm-3 col-xs-6 text-center">
<a class="btn btn-default btn-lg" href="/menu/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-cutlery fa-stack-1x fa-inverse"></i></span> <h5>Menu</h5></a>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<a class="btn btn-default btn-lg" href="/bar/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-glass fa-stack-1x fa-inverse"></i></span> <h5>Bar Menu</h5></a>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<a class="btn btn-default btn-lg" href="/social/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-camera-retro fa-stack-1x fa-inverse"></i></span> <h5>Social</h5></a>
</div>
<div class="col-sm-3 col-xs-6 text-center">
<a class="btn btn-default btn-lg" href="/where/"><span class="fa-stack fa-3x"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-map-marker fa-stack-1x fa-inverse"></i></span> <h5>Directions</h5></a>
</div>
Any suggestions? Anything I am over looking? Thanks.
live website
Related
I have added the class center-block to be able to vertical center the Torza image. But no result, any suggestions?
<?php
<div class="container">
<hr />
<div class="text-center center-block">
<img src="img/logo_torza.png" alt="Torza" width="85">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i>
</div>
<hr />
</div>
?>
You can use the code below:
HTML
<div class="container">
<hr />
<div class="torza-box">
<img src="img/logo_torza.png" alt="Torza" width="85">
<div class="links-box">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i></div>
</div>
<hr />
</div>
CSS
.torza-box{
position:relative;
}
.links-box{
position:absolute;
top:50%;
right:10px;
transform:translatey(-50%);
}
if you added bootstrap CSS URL then this work as good, otherwise you write simple CSS code here...
.center-block a {
display:inline-block;
vertical-align:middle;
}
or view jsfiddle Demo
Thank you
Don't add it as a class, in that div tag use this:
<div style="text-align:center, margin-left:auto, margin-right:auto>
and i'm not sure why this is in php tags, this won't work with html unless you're echoing it.
Either get rid of the php tags or at the beginning write echo" and at the end write ";
Either replace it with this:
<?php
echo"
<div class="container">
<hr />
<div class="text-center center-block">
<img src="img/logo_torza.png" alt="Torza" width="85">
<i class="fa fa-globe fa-2x social"></i>
<i class="fa fa-linkedin-square fa-2x social"></i>
<i class="fa fa-facebook-square fa-2x social"></i>
<i class="fa fa-envelope-square fa-2x social"></i>
</div>
<hr />
</div>
";
?>
or just get rid of the <?php?> tags
I have an html file in which I want to display icons in button.
I am using 3 different images of by Awesome Font i.e
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-user-plus" aria-hidden="true"></i>
<i class="fa fa-user-times" aria-hidden="true"></i>
I have included its library in my project.
Only first image tag i.e <i class="fa fa-user" aria-hidden="true"> is working rest are not displaying the icon. Need Help!
Thanks in advance.
<div class="col-md-6" style="text-align:center">
<button class="btn btn-primary" type="button" ng-click="onUnAssignUsers()"><i class="fa fa-user-times" aria-hidden="true"></i>Unassign Users</button>
<button class="btn btn-primary" type="button" ng-click="onAssignUsers()"><i class="fa fa-user-plus" aria-hidden="true"></i>Assign Users</button>
<button class="btn btn-primary" type="button" ng-click="onUsers()">Users</button>
</div>
Make sure you are using latest version of Font-Awesome.
Here is the link i used for fiddle and is the latest CDN from bootstrapcdn.
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
You missed out <i class="fa fa-user-times" aria-hidden="true"></i> on Users Button.
Check https://jsfiddle.net/luzan/det1ovqa/
you are not using the latest version. Those icons are included in version 4.
Try this one. I think there is <link rel="stylesheet" href="path-to-your-fontawesome-css-file/css/font-awesome.css">
<link rel="stylesheet" href="http://fontawesome.io//assets/font-awesome/css/font-awesome.css">
<div class="col-md-6" style="text-align:center">
<button class="btn btn-primary" type="button" ng-click="onUnAssignUsers()"><i class="fa fa-user-times" aria-hidden="true"></i> Unassign Users</button>
<button class="btn btn-primary" type="button" ng-click="onAssignUsers()"><i class="fa fa-user-plus" aria-hidden="true"></i> Assign Users</button>
<button class="btn btn-primary" type="button" ng-click="onUsers()"><i class="fa fa-user" aria-hidden="true"></i> Users</button>
</div>
I know this sound crazy or easy but I'm not getting any result.
I'm working on bootstrap accordion and I'm trying to figure out how to write in CSS to allow show ALL color Blue in (icon, text and background color) in at the SAME TIME using CSS :focus when person clicked the link or accordion...
please see one line of accordion of codes...
<i class="fa fa-user" aria-hidden="true"></i> Members
or please see the whole sample of each accordion buttons...
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<dl class="accordion">
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i> Manage</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
<div class="list-group">
<i class="fa fa-tachometer blue" aria-hidden="true"></i> Dashboard
<i class="fa fa-users" aria-hidden="true"></i> Members
<i class="fa fa-clipboard" aria-hidden="true"></i> Posts
<i class="fa fa-tachometer" aria-hidden="true"></i> Vestibulum at eros
</div>
</dd>
<dt><span><i class="fa fa-tachometer" aria-hidden="true"></i> Settings</span><i class="accordion_icon fa fa-chevron-up"></i></dt>
<dd class="accordion_content">
<div class="list-group">
<i class="fa fa-user" aria-hidden="true"></i> Members
<i class="fa fa-clipboard" aria-hidden="true"></i> Posts
<i class="fa fa-comments" aria-hidden="true"></i> comments
<i class="fa fa-user-secret" aria-hidden="true"></i> Privacy
<i class="fa fa-bell" aria-hidden="true"></i> Notifications
<i class="fa fa-envelope" aria-hidden="true"></i> Emails
<i class="fa fa-globe" aria-hidden="true"></i> Sites Infor
</div>
</dd>
I'm trying to close the gaps/margins between the social icons and have it centered under the text.
Jumbotron
Here is the code:
div class="jumbotron"><!-- Jumbotron -->
<div class="container1">
<p>A blog to explore, learn, and share Electro Funk, Soul, & Hip Hop Music</p>
<div id="social"><!-- Social Icons -->
<div id="twitter" class="col-md-4">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
Twitter
</div>
<div id="instagram" class="col-md-4">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
Instagram
</div>
<div id="soundcloud" class="col-md-4">
<i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i>
Soundcloud
</div>
</div>
</div>
It would probably be better to not use separate columns for each icon and instead use one column surrounding them all:
<div id="social" class="col-md-12 text-center"><!-- Social Icons -->
<div id="twitter">
<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
Twitter
</div>
<div id="instagram">
<i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
Instagram
</div>
<div id="soundcloud">
<i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i>
Soundcloud
</div>
</div>
How can I have stacked icons and apply fixed width to both icons (or to the stack itself)?
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</p>
</div>
The above example does not result in a fixed width icon. Adding fa-fw to the span class does not resolve the issue. Thoughts?
Seems that a newer version of Font Awesome fixes this issue. I am using v4.4 below.
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="col-md-4">
<div class="list-group">
<a class="list-group-item" href="#">
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse"></i>
</span> Some text
</a>
<br>
<a class="list-group-item" href="#">
<span class="fa-stack">
<i class="fa fa-fw fa-stack-2x"></i>
<i class="fa fa-fw fa-stack-1x fa-anchor"></i>
</span> Anchor
</a>
</div>
</div>
In order for the rest of the icons in the list-group to appear with the same fixed width they have to be stacked behind an empty icon.
I did not test it but what if you try :
<div class="col-md-4">
<p>
<span class="fa-stack text-danger">
<i class="fa fa-fw fa-stack-2x fa-stop" style="font-size:20px"></i>
<i class="fa fa-fw fa-stack-1x fa-exclamation fa-inverse" style="font-size:20px"></i>
</span> Some text
</p>
</div>
... and adjust the values to fit the width attempted.
If it works, you could overwrite the original styles .fa-stop, .fa-exclamation ... directly in your CSS stylesheet. Maybe you will have to use !important hack.