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>
Related
<div>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
I want to change the fonts to red color without using vanilla CSS. what should be the class in bootstrap
You can just add .text-danger to the containing element.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/all.min.css">
<div class="text-danger">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
https://getbootstrap.com/docs/5.0/utilities/colors/
Read the Bootstrap 5 docs. The text-danger class is red, so this can be used where ever you want red text..
<i class="fas fa-star text-danger"></i>
I would like to make a combination of icons via FA stack but it does not work. I have pure example from documentation and it shows me only empty squares. Code looks like:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x"></i>
</span>
and the result looks like on the picture below (last icon on the line).
What am I doing wrong?
Use the correct CDN which is the one of the V5 not the V4
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<span class="fa-stack" style="vertical-align: top;">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fas fa-flag fa-stack-1x"></i>
</span>
I'm trying to create a social sharing module in my Java web application. I'm using this example from w3schools.
I already had fontawesome icons in the project but for some reason after adding the following code only either of them (social icons or old icons in the site) are working. They are showing square icons or no icons on switching with various cdn links of fontawesome css.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
crossorigin="anonymous">
<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The social media icon bar -->
<div class="icon-bar">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
<i class='fa fa-brain'></i>
<i class='fa fa-calculator'></i>
</div>
I've not added the css code from the example though. What am I doing wrong?
You are using few icons from fontawesome 5. for example fa-brain. You need to update css link and font classes accordingly.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" crossorigin="anonymous">
<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<!-- The social media icon bar -->
<div class="icon-bar">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-google"></i>
<i class="fab fa-linkedin-in"></i>
<i class="fab fa-youtube"></i>
<i class="fas fa-calculator"></i>
<i class="fas fa-brain"></i>
</div>
Be sure to use only icons from the free set if you do not have a pro license. https://fontawesome.com/icons?d=gallery&m=free
The icons are working fine.
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.1/pure-min.css"
crossorigin="anonymous">
<!-- Load font awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- The social media icon bar -->
<div class="icon-bar">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</div>
Check Codepen: https://codepen.io/manaskhandelwal1/pen/YzXNNLw
There is some another variability in your code.
I am trying to implement similar to the one in the attachment.
Below is my code. i get the envelope icon but dont know how to get the expected result by placing another icon.
<i class="fa fa-envelope-o" aria-hidden="true"></i>
Thanks
.wrap{
display: inline-block;
position: relative;
}
.wrap > .fa-commenting-o{
position: absolute;
top: -3px;
left: 10px;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
<div class="wrap">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
</div>
Do you want like this?
Try this:
.text-danger {
color: #d9534f;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
<div class="container">
<span class="fa-stack fa-lg" aria-hidden="true">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
</div>
Place your <i></i>s in a span like: Check Fontawesome examples
<span class="fa-stack fa-lg">
<i class="fa fa-envelope-o fa-stack-2x"></i><!--Make background icon large-->
<i class="fa fa-commenting-o fa-stack-1x"></i><!--make foreground icon smaller-->
</span>
Let me know how it works for you.
Have fun
You can overlap icons using CSS property. Try this
<span class="fa-stack fa-lg">
<i class="fa fa-envelope-o fa-stack-2x"></i>
<i class="fa fa-commenting fa-stack-2x" style="padding-left:22px;margin-top:-16px;z-index:232"></i>
</span>
check it on fiddle here
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>