I want to add upto 6 icons in a div bar in Bootstrap as shown in the below wireframe, I have already made it in an icon bar class but my supervisor has prohibited me to do so, so I cant use any of the navigation bars or icon bars. What will be the best way to do it? Also How to keep it seperate from the below div?
The wireframe of what I want
Following is my html code:
<nav class="navbar ">
<div class="icon-bar">
<a class="active" href="#"><i class="fa fa-home"> </i> </a>
<i class="fa fa-search"> </i>
<i class="fa fa-globe"> </i>
<i class="fa fa-envelope"> </i>
<i class="fa fa-trash"> </i>
</div>
</nav>
<div class="container-fluid">
<div class="col-sm-12" style="background-color: green;"></div> <br> <br>
Simple copy and paste
<style>
.icons_div {
margin: 0px auto;
width: max-content;
}
.icon{
margin : 0px auto;
width: 15px;
display: initial;
}
.fa {
padding: 0px 10px;
}
</style>
<div class="icons_div">
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
<div class="icon">
<i class="fa fa-circle" aria-hidden="true"></i>
</div>
</div>
Related
<div class="col-md text-left mt-5">
<h5 class="Review" style=" font-size: 24px; color: #c0bebe;">Reviews</h5>
<ul class="list-unstyled quick-links">
<li> <p style="color: #c0bebe; "> Google-20 reviews </p></li>
<li><p style="color: #c0bebe;">4,9<i class="far fa-star ml-3"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i></p></li>
<li><p style="color: #c0bebe;">Facebook - 32 reviews</p></li>
<li><p style="color: #c0bebe;">5,0 <i class="far fa-star ml-3"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i> <i class="far fa-star"style="color: yellow;"></i></p></li>
</ul>
</div>
</div>
i wanted too change the font style of Google in lato-bold and 20 reviews in to lato italic while they are next too each other.
Wrap what you want to change in a <span> tag then assign the class accordingly.
You'll notice that I cleaned up the code considerably. It is much easier to read by doing it this way.
p {
color: #c0bebe;
}
.googlefont {
font-family: Lato;
font-weight: 600;
}
.reviewfont {
font-family: Lato;
font-style: italic;
}
i {
color: yellow;
}
.Review {
font-size: 24px;
color: #c0bebe;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="col-md text-left mt-5">
<h5 class="Review">Reviews</h5>
<ul class="list-unstyled quick-links">
<li>
<p> <span class="googlefont">Google</span>-<span class="reviewfont">20 reviews </span></p>
</li>
<li>
<p>4,9<i class="fa fa-star ml-3"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></p>
</li>
<li>
<p>Facebook - 32 reviews</p>
</li>
<li>
<p>5,0 <i class="fa fa-star ml-3"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i></p>
</li>
</ul>
</div>
I have these div below taht have a font swesome icon with a circle around them. But they aren't aligned correclty as the width aren't the same, so the text isn't vertically aligned.
Can this be fixed, I remember some class that I could use to fix it, but don't remember the class name.
.circle-icon {
background: #e3f4f6;
padding: 10px;
border-radius: 50%;
}
<div>
<span><i class="fa fa-user fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Like<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
<span><i class="fa fa-star fa-lg rating-color mr-2 circle-icon mb-2" aria-hidden="true"></i></span> <span>{{member.reviews}} Review<ng-container *ngIf="member.reviews > 1">s</ng-container> </span>
</div>
<div>
<span><i class="fa fa-check fa-lg rating-color mr-2 circle-icon" aria-hidden="true"></i></span> <span>Verified</span>
</div>
Use stacking icons: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons
.fa-circle {
color: #e3f4f6;
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
</span>
<span>10 Likes</span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>
Works also with the CSS version:
.fa-circle {
color: #e3f4f6;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-user fa-stack-1x" aria-hidden="true"></i>
</span>
<span>10 Likes</span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-star fa-stack-1x" aria-hidden="true"></i>
</span> <span>8 Reviews </span>
</div>
<div>
<span class="fa-stack fa-1x">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fas fa-check fa-stack-1x" aria-hidden="true"></i>
</span> <span>Verified</span>
</div>
You can simply use the width atribute and give every cricle-icon the same width.
Sorry for the verbose title, I didn't really know how else to explain whats happening. Let this JsFiddle speak for what my problem is: https://jsfiddle.net/aq9Laaew/305608/
If you notice on the buttons that have had their text truncated the icons seem to have a shift to the right a few pixels. I have no clue what to make of this or why it happens.
Here is the HTML code I'm using to replicate this issue in my project:
<div class="container">
<div class="row">
<div class="content">
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>1
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>234567890
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>3
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>4
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>5
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>6
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>7
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>8
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>9
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>10
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>11
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>12
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>13
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>14
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>15
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>16123412341234
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>17
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>18
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>19
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>20
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>21
</button>
</div>
</div>
</div>
</div>
Here is the CSS I am using:
.content {
text-align: left;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
height: 500px;
overflow-y: scroll;
}
.content div {
width: 95px;
margin-bottom: 5px;
margin-right: 5px;
}
.content div i {
margin-right: 5px;
}
button {
max-width: 95px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
I am using bootstrap, which I'd assume there is probably something causing this phantom shifting, but I don't have any idea where to start. Any help would be greatly appreciated.
You can simply correct this by adjusting text-align to left. By default it's set to center and when the text is tuncated it seems that the space needed for the ... is less that the omitted words thus everything will be shifted to get centred.
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.content {
text-align: left;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
height: 500px;
overflow-y: scroll;
}
.content div {
width: 95px;
margin-bottom: 5px;
margin-right: 5px;
}
.content div i {
margin-right: 5px;
}
button {
max-width: 95px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align:left;/*added*/
}
</style>
<div class="container">
<div class="row">
<div class="content">
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>1
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>234567890
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>3
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>4
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>5
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>6
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>7
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>8
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>9
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>10
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>11
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>12
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>13
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>14
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>15
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>16123412341234
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>17
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>18
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>19
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>20
</button>
</div>
<div>
<button>
<i class="fa fa-folder fa-lg" #icon></i>21
</button>
</div>
</div>
</div>
</div>
just a quick one. I have 3 Font Awesome icons that i'm using for contact buttons on my page. These are aligned vertically and centered within a container div. I also have text next to each icon, which results in both icon and text being centered on the page. What i'm after is to center the icons vertically and have the text follow separately. I believe I could wrap the icons in a container then all the corresponding text in another container, but I realise this would look messy in my CSS. There must be a simple answer out there that i'm not realising. If you don't understand what i'm going on about please view the code snippet below. Thanks for any feedback.
<section class="contact-main">
<div class="container">
<div class="email">
<i class="fas fa-envelope fa-3x"><p> Email</p></i>
</div>
<div class="phone">
<i class="fas fa-phone-square fa-3x"><p> Phone</p></i>
</div>
<div class="facebook">
<i class="fab fa-facebook-square fa-3x"><p> Facebook</p></i>
</div>
</div>
</section>
You can use fixed-width icons with class fa-fw . Here is the link.
HTML
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Settings</a>
</div>
I hope it helps.
Something like this? Fiddle
<body>
<section class="contact-main">
<div class="container">
<div class="list-group">
<div class="email">
<i class="fa fa-envelope fa-3x fa-fw"></i><h3 style="display:inline-block;">Email</h3>
</div>
<div class="phone">
<i class="fa fa-phone-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Phone</h3>
</div>
<div class="facebook">
<i class="fab fa-facebook-square fa-3x fa-fw"></i><h3 style="display:inline-block;">Facebook</h3>
</div>
</div>
</div>
</section>
</body>
Was overthinking the whole thing. I just moved them into alignment using position: relative. Lightbulb finally lit up!
I'm having trouble getting the correct styling for my footer. I've managed to get the correct styling for mobile but for tablet and desktop I'm having a few issues. I'm trying to get the social icons to be centred horizontally off to the right-hand side of the footer. I'm not sure why the have the current set location. Any help in figuring this out would be helpful.
This image shows what I'm trying to achieve for the desktop version. I'm not sure how to do it with out using a fixed margin position which isn't what I want to do as it only then works in chrome and then looks bad in other browsers?
enter link description here
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p class="copyright text-muted">Copyright © Eat Sleep Kayak 2015</p>
</div>
<div class="footersocialicons col-xs-12 col-sm-6">
<ul class="list-inline">
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
/* Footer */
#media (max-width:768px){
footer {text-align: center; padding: 5px;}
}
#media (min-width: 769px) {
footer .list-inline {
float: right;
position:relative;top:50% ;
transform:translateY(-50%);
}
footer .copyright {
float: left;
}
}
footer {
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/*background-color: #eee;*/
background-color: #6B6A67;
padding-top: 5px;
}
footer .copyright {
font-size: 14px;
}
footer .list-inline {
height: 100%;
}
Add the class .text-center to this line - <div class="footersocialicons col-xs-12 col-sm-6"> to center everything inside.
Try adding a fixed height and line-height to your footer. You also said you wanted the icons to the right, so you add the .text-right class to do that.
The following centers the footer text and icons horizontally and aligns the icons to the right.
<style>
footer {
height: 60px;
line-height: 60px;
}
</style>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p class="copyright text-muted">Copyright © Eat Sleep Kayak 2015</p>
</div>
<div class="footersocialicons col-xs-12 col-sm-6 text-right">
<ul class="list-inline">
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-google fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li>
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-youtube fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
Fiddle: http://jsfiddle.net/timgavin/mas4dg0y/