Here is my footer image with social icons. I need to know how to add that using bootstrap/css??
As like the picture shown. I need to know how to add that using bootstrap or css? How to design that separation? This is my code for the footer.
<footer class="footer">
<div class="container text-left">
<small style="color:grey" class="copyright">Copyright © 2015 SVAPP Private Limited.All Rights Reserved.</small>
<small style="color:grey" class="fa fa-lg fa-skype pull-right"> </small>
<small style="color:grey" class="fa fa-lg fa-google-plus pull-right"> </small>
<small style="color:grey" class="fa fa-lg fa-linkedin pull-right"> </small>
<small style="color:grey" class="fa fa-lg fa-twitter pull-right"> </small>
<small style="color:grey" class="fa fa-lg fa-facebook pull-right"> </small>
</div><!--End container-->
</footer><!--End footer 2-->
Image here
Here is one solution how you can create this using Bootstrap and Font awesome icons. Bootstrap glyphicons don't have social icons so you can include some other icons font.
.footer {
background: #061D25;
padding: 10px 0;
}
.footer a {
color: #70726F;
font-size: 20px;
padding: 10px;
border-right: 1px solid #70726F;
transition: all .5s ease;
}
.footer a:first-child {
border-left: 1px solid #70726F;
}
.footer a:hover {
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer">
<div class="container text-center">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-skype"></i>
</div>
</footer>
You can also create this without Bootstrap framework and css will be almost the same, you just need to include icons font.
footer {
background: #061D25;
padding: 10px 0;
text-align: center;
}
footer a {
color: #70726F;
font-size: 20px;
padding: 10px;
border-right: 1px solid #70726F;
transition: all .5s ease;
}
footer a:first-child {
border-left: 1px solid #70726F;
}
footer a:hover {
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<footer>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-skype"></i>
</footer>
look in http://lipis.github.io/bootstrap-social/ where you can get the icons for boostrap.
UPDATE 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.10.1/bootstrap-social.css" rel="stylesheet" >
<body>
<div class="text-center">
<a onclick="" class="btn btn-social-icon btn-lg btn-facebook"><i class="fa fa-facebook"></i></a>
<a onclick="" class="btn btn-social-icon btn-lg btn-dropbox"><i class="fa fa-dropbox"></i></a>
<a onclick="" class="btn btn-social-icon btn-lg btn-flickr"><i class="fa fa-flickr"></i></a>
<a onclick="" class="btn btn-social-icon btn-lg btn-pinterest"><i class="fa fa-pinterest"></i></a>
</div>
</body>
</html>
Related
I need to center icons in dropdown. When I have text in dropdown item instead of icon, it is in center, but icon not:
Here is my code:
<div class="btn-group pull-right">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
Click
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>
A
</li>
<li>
<i class="fa fa-th-large"></i>
</li>
<li>
<i class="fa fa-th"></i>
</li>
</ul>
</div>
How to center icons in dropdown?
Thanks
You need to override Bootstrap predefined values using !important. Below is the working snippet
li {
display: inline;
background: red;
position: relative;
padding: 5px 20px!important;
margin: 1px;
}
.dropdown-menu>li>a {
display: inline!important;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group pull-right">
<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
Click
</button>
<ul class="dropdown-menu dropdown-menu-right text-center" role="menu">
<li class="text-center">
A
</li>
<li>
<i class="fa fa-th-large"></i>
</li>
<li>
<i class="fa fa-th"></i>
</li>
</ul>
</div>
</body>
</html>
<div class="col-md-4">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
How can I display h4 element on the right of the icon and vertically aligned? Should I float left the span?
One of the ways would be to use inline-block display and middle align it - see demo below:
.wrapper > * {
display: inline-block;
vertical-align: middle;
}
.blue {
color: blue;
}
.white {
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-4 wrapper">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
Use CSS Flexbox. Make a parent <div> that wraps icon and text into it (in my case its icon-holder) and make it a flexbox container using display: flex.
Have a look at the snippet below:
.icon-holder {
display: flex; /* Flex Container */
align-items: center; /* Vertically Align Content */
}
.blue {
color: #33b5e5;
}
span {
color: #fff;
}
h4 {
padding-left: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="col-md-4">
<div class="icon-holder">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
</div>
Hope this helps!
You can use display: flex and can do something like below :
.col-md-4 {
display: flex;
align-items: center;
}
.blue {
color: blue
}
.white {
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-4 wrapper">
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x blue"></i>
<i class="fa fa-wifi fa-stack-1x white"></i>
</span>
<h4 class="blue">Free wifi</h4>
</div>
I want to display some icons from font-awesome for a rating system.
At this point I just want to display the result but I didn't find how to colour only half of the star icon.
For instance, if the rate is 3.5 I would display 3 yellow stars, 1 half star in yellow and the rest in grey.
Is there a way to do it with reactjs Font-aweosome component (
import FontAwesome from 'react-fontawesome';)?
It is not possible to color half of the fontawesome icons but you can try using this technique.
.header_star{
float: left;
margin-left: 10px;
position: relative;
}
.header_star .fa.fa-star{
font-size: 20px;
}
.header_star:hover {
text-decoration: none;
}
.header_star .star_hover .fa.fa-star {
color: #ffd200;
}
.star_hover {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
white-space: nowrap;
width: 0;
transition: all 0.3s linear 0s;
}
.header_star:hover .star_hover {
width: 92%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<div class="header_star">
<a href="#" class="header_star">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<div class="star_hover">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
</a>
</div>
I've used Google's material icons, but there is an unwanted padding below the icons. Why does this appear and how can I correct it ?
.message-text {
background-color: teal;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="message-text">
<span class="constellation">
<i class="material-icons active">star</i>
<i class="material-icons inactive">star</i>
<i class="material-icons inactive">star</i>
<i class="material-icons inactive">star</i>
<i class="material-icons inactive">star</i>
</span>
</div>
I am trying to align vertical blocks containing icons and some text. Everything works as expected until the text is too large for the block.
.big-icons .big-icon {
font-size: 42px;
margin-bottom: 10px;
text-align: center;
line-height: 3.2em;
}
.big-icons .big-icon a .text {
font-size: 18px;
position: relative;
text-transform: uppercase;
top: 3em;
white-space: nowrap;
}
.big-icons .big-icon a {
font-weight: 300;
text-decoration: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="big-icons">
<span class="big-icon">
<a target="_blank" href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-magic fa-stack-1x fa-inverse"></i>
<span class="text">Short title</span>
</span>
</a>
</span>
<div class="visible-xs divider"></div>
<span class="big-icon">
<a target="_blank" href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-area-chart fa-stack-1x fa-inverse"></i>
<span class="text">Very long long text</span>
</span>
</a>
</span>
<div class="visible-xs divider"></div>
<span class="big-icon">
<a target="_blank" href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-dropbox fa-stack-1x fa-inverse"></i>
<span class="text">Title</span>
</span>
</a>
</span>
<div class="visible-xs divider"></div>
</div>
How do i make the link containing text "Very long long text" to not intersect with text "Title" on the right ?
Seems like the fa-stack-1x class gives the icon position:absolute and thats why its not being centered properly. I would try to use fa just to render the icon in certain size and do everything else in my own css. The circle with border radius, own position etc.