<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>
Related
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.
This is the section of my code that doesn't work:
.copyright {
display: flex;
flex-wrap: nowrap;
/* This is not working */
color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Sample</p>
<span>
<li class="fa-stack">
<i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</li>
<li class="fa-stack">
<i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</li>
</span>
<br><br>
<p class="copyright">
<span>I want this left from icons</span>
<span>
<li class="fa-stack">
<i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</li>
<li class="fa-stack">
<i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</li>
</span>
</p>
Do you know why flexwrap: nowrap; isn't working? My icons are below the span instead of being placed to the right.
It's not working because flex-wrap: nowrap applies to flex items, not the text inside the item. You need to target the text with white-space: nowrap.
.copyright {
display:flex;
flex-wrap: nowrap; /* will prevent flex items on the same line from wrapping */
white-space: nowrap; /* will prevent text from wrapping */
}
jsFiddle demo
Just give your copyright class display: inline-block;
Just need a common wrapper such a div and display flex
div {
display: flex;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<p>Sample</p>
<span>
<li class="fa-stack">
<i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</li>
<li class="fa-stack">
<i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</li>
</span>
<br><br>
<p class="copyright">
<div>
<span>I want this left from icons</span>
<span>
<li class="fa-stack">
<i class="fa fa-square fa-stack-2x" style="color:#3b5998"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</li>
<li class="fa-stack">
<i class="fa fa-square fa-stack-2x" style="color:#00aced"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</li>
</span>
</div>
</p>
I just needed to update <p class="copyright"> with <div class="copyright">
Or I could use display:block for the p.copyright
which ever elements or icons you want to see in a line and in order, then place those in a div element which is having flex.
and you dont need flex-wrap property as with proper html order ,just a display:flex property will take care of most of the things
See here https://jsfiddle.net/b6vw9t2y/38/
<div style='display: flex'>
<i>icon1></i>
<i>icon2</i>
<i>icon3</i>
</div>
output: icon1 icon2 icon3
go through below link for flexbox basics , its understandable and it will surely makes ur life much easier when u get the grip of flexbox
https://www.w3schools.com/css/css3_flexbox.asp
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>
How to add a text inside the icon using fa icon?
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<i class="fa fa-circle-o" aria-hidden="true">1</i>
How to add the number 1 inside the icon?
First you should add this script into your head:
<script defer src="https://use.fontawesome.com/releases/v5.11.2/js/all.js"></script>
then you can use icons like this:
<div class="fa-4x">
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-circle" style="color:Tomato"></i>
<i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-bookmark"></i>
<i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i>
<i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i>
<i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i>
<i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-certificate"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>
<span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fas fa-envelope"></i>
<span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>
</div>
Then you should have those icons as result:
reference Layering, Text, and Counters | Font Awesome
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/