I am using Font awesome cdn in my header
but still icons are not visible
<div class ="star-rating-container">
<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>
You forgot https:// in your link. Also, fas didn't work for me, so I put fa Here is a fiddle that works:
<script src="https://use.fontawesome.com/50a7448982.js"></script>
<div class ="star-rating-container">
<i class="fa fa-star"></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>
</div>
Related
How to place a section as a background for all of the page?
I have maked a FontAwesome Background Animation Effects
all of it in a section, I want to complete the page with paragraph, photos,,, and set the section as a background for all of that. there is about 20 rows in HTML code but I have maked it small so I can put it in StackOverflow
*
{
margin: 0;
padding: 0;
}
section
{
position: relative;
width: 100%;
height: 100vh;
background: #111;
display: flex;
flex-direction: column;
overflow: hidden;
}
section .row
{
position: relative;
top: -50%;
width: 100%;
display: flex;
padding: 10px 0;
white-space: nowrap;
font-size: 64px;
transform: rotate(-30deg);
}
i
{
color: rgba(0, 0, 0, 0.5);
transition: 1s;
padding: 0 5px;
user-select: none;
cursor: default;
}
i:hover
{
color: #0f0;
transition: 0s;
text-shadow: 0 0 120px #0f0;
}
section .row div
{
animation: animate1 80s linear infinite;
animation-delay: -80s;
}
section .row div:nth-child(2)
{
animation: animate2 80s linear infinite;
animation-delay: -40s;
}
#keyframes animate1
{
0%
{
transform: translateX(0%);
}
100%
{
transform: translateX(-200%);
}
}
#keyframes animate2
{
0%
{
transform: translateX(100%);
}
100%
{
transform: translateX(-100%);
}
}
section .row:nth-child(even) div
{
animation: animate3 80s linear infinite;
animation-delay: -80s;
}
section .row:nth-child(even) div:nth-child(2)
{
animation: animate4 80s linear infinite;
animation-delay: -40s;
}
#keyframes animate3
{
0%
{
transform: translateX(-100%);
}
100%
{
transform: translateX(100%);
}
}
#keyframes animate4
{
0%
{
transform: translateX(-200%);
}
100%
{
transform: translateX(0);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>FontAwesome Background | Animation Effects</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
</section>
</body>
</html>
If your background based on DOM elements, you cannot apply this to another page without paste the same html code one more time in another place. But if you apply background or background pattern based on CSS, you can multiple this one everywhere. In this case, all what you can is absolute positioning this section in every page where you want, using correct position in stack with z-index. Also, need to check performance of your page: maybe some gif pattern will be easier.
Make the section's position fixed with top 0 and push it back with z-index. Then change all the other element's background to be transparent and push them front with z-index, and you get the section to be as background for the whole page.
*
{
margin: 0;
padding: 0;
}
#background
{
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #111;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 0;
}
section .row
{
position: relative;
top: -50%;
width: 100%;
display: flex;
padding: 10px 0;
white-space: nowrap;
font-size: 64px;
transform: rotate(-30deg);
}
i
{
color: rgba(0, 0, 0, 0.5);
transition: 1s;
padding: 0 5px;
user-select: none;
cursor: default;
}
i:hover
{
color: #0f0;
transition: 0s;
text-shadow: 0 0 120px #0f0;
}
section .row div
{
animation: animate1 80s linear infinite;
animation-delay: -80s;
}
section .row div:nth-child(2)
{
animation: animate2 80s linear infinite;
animation-delay: -40s;
}
#keyframes animate1
{
0%
{
transform: translateX(0%);
}
100%
{
transform: translateX(-200%);
}
}
#keyframes animate2
{
0%
{
transform: translateX(100%);
}
100%
{
transform: translateX(-100%);
}
}
section .row:nth-child(even) div
{
animation: animate3 80s linear infinite;
animation-delay: -80s;
}
section .row:nth-child(even) div:nth-child(2)
{
animation: animate4 80s linear infinite;
animation-delay: -40s;
}
#keyframes animate3
{
0%
{
transform: translateX(-100%);
}
100%
{
transform: translateX(100%);
}
}
#keyframes animate4
{
0%
{
transform: translateX(-200%);
}
100%
{
transform: translateX(0);
}
}
div {
position: relative;
color: white;
background-color: transparent;
z-index: 100;
line-height: 2rem;
color: #fff6;
}
div.red {
color: #f005;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>FontAwesome Background | Animation Effects</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section id="background">
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
</section>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Non nisi est sit amet facilisis magna etiam tempor. Cursus euismod quis viverra nibh. Augue eget arcu dictum varius. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Turpis egestas sed tempus urna. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Elit pellentesque habitant morbi tristique senectus et. Eget felis eget nunc lobortis mattis aliquam faucibus purus. At urna condimentum mattis pellentesque id nibh tortor id. Faucibus ornare suspendisse sed nisi lacus. Habitant morbi tristique senectus et netus et malesuada. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Diam in arcu cursus euismod. Sodales neque sodales ut etiam sit amet nisl purus. Aliquam sem fringilla ut morbi tincidunt.
</div>
<div class="red">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare. Non nisi est sit amet facilisis magna etiam tempor. Cursus euismod quis viverra nibh. Augue eget arcu dictum varius. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Turpis egestas sed tempus urna. Fames ac turpis egestas maecenas pharetra convallis posuere morbi. Elit pellentesque habitant morbi tristique senectus et. Eget felis eget nunc lobortis mattis aliquam faucibus purus. At urna condimentum mattis pellentesque id nibh tortor id. Faucibus ornare suspendisse sed nisi lacus. Habitant morbi tristique senectus et netus et malesuada. Dictum at tempor commodo ullamcorper a lacus vestibulum sed arcu. Diam in arcu cursus euismod. Sodales neque sodales ut etiam sit amet nisl purus. Aliquam sem fringilla ut morbi tincidunt.
</div>
</body>
</html>
But a small problem is, you will not be able to hover those icons because they are at the back of a div.
<div class="col-lg-4 col-sm-12 footer-social">
</i>
</i>
</i>
<i class="fab fa-google-plus-g"></i>
</i>
</div>
Here i face a very big problem with the footer the links dont work even after everything seems to be correct. Can anyone suggest me to do anything. A very simple place giving me a lot of trouble.
quotes are missing href=""
<div class="col-lg-4 col-sm-12 footer-social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fa fa-facebook"></i>
</div>
Please correct href like this
<div class="col-lg-4 col-sm-12 footer-social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fa fa-facebook"></i>
</div>
I am working with fontawesome 5.0.13 and all of a sudden the last icons that I added decided to not show up on InDesign. I am fairly new with html and fontawesome in general. So any help will be appreciated.
What I do is copy and paste the code for each icon in the doc below. Then I copy the glyph and paste it on my InDesign file. From there, I only need to select the icon and change the font to FontAwesome. The problem started when I changed the font to FontAwesome and instead of coming to form, the icon would disappear. Any ideas why?
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="css/fontawesome-all.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<i class="fas fa-address-book"></i>
<i class="fab fa-wpexplorer"></i>
<i class="fab fa-cc-discover"></i>
<i class="fab fa-searchengin"></i>
<i class="fas fa-edit"></i>
<i class="fas fa-tty"></i>
<i class="fas fa-cogs fa-spin"></i>
<i class="fas fa-share-alt"></i>
<i class="fas fa-edit"></i>
<i class="fas fa-graduation-cap"></i>
<i class="fas fa-battery-full"></i>
<i class="fas fa-portrait"></i>
<i class="fas fa-database"></i>
<i class="fas fa-plane"></i>
<i class="fas fa-globe"></i>
<i class="fas fa-toolbox"></i>
<i class="fas fa-user-plus"></i>
<i class="fas fa-cart-plus"></i>
<i class="fab fa-accessible-icon"></i>
<i class="fas fa-book"></i>
<i class="fas fa-book fas-spin"></i>
<i class="fas fa-flag-checkered"></i>
<i class="fas fa-building"></i>
<i class="fas fa-briefcase"></i>
<i class="fas fa-briefcase fa-spin"></i>
<i class="fas fa-flask"></i>
<i class="fas fa-sitemaps fa-3x"></i>
<i class="fab fa-facebook-square"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-twitter"></i>
<i class="fas fa-mouse-pointer"></i>
<i class="fas fa-info-circle"></i>
</body>
</html>
I am trying two float two elements with inside a Bootstrap navigation, but it won't work.
.cls1 {
float: left !important;
}
.cls2 {
float: right !important;
}
<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" />
<nav class="navbar navbar-default navbar-static-top hidden-sm hidden-md hidden-lg">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="cls2">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>NATURE</li>
<li>TRAVEL</li>
<li>CONTACT</li>
<li>ABOUT ME</li>
<li>MUSIC</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Am I missing something? Is there a conflict that I am not seeing?
there is class .hidden-lg it have css style
#media (max-width: 1199px) and (min-width: 992px)
.hidden-md {
display: none!important;
}
#media (min-width: 1200px)
.hidden-lg {
display: none!important;
}
#media (max-width: 991px) and (min-width: 768px)
.hidden-sm {
display: none!important;
}
Because of these bootstrap classes, the whole element should be hide from DOM. Below 768px of window size it should work.
Below edit the code and try it
.cls1 {
float: left !important;
}
.cls2 {
float: right !important;
}
#media (max-width: 768px) {
.cls3 {
float: right !important;
}
.cls2 {
display:none;
}
}
<html>
<head>
<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" />
<head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="cls3 hidden-sm hidden-md hidden-lg">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
<div id="navbarCollapse5" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">HOME</li>
<li>NATURE</li>
<li>TRAVEL</li>
<li>CONTACT</li>
<li>ABOUT ME</li>
<li>MUSIC</li>
</ul>
</div>
<div class="cls2">
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-youtube-play" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
<i class="fa fa-google-plus" aria-hidden="true"></i>
<i class="fa fa-pinterest-p" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-tumblr" aria-hidden="true"></i>
<i class="fa fa-soundcloud" aria-hidden="true"></i>
<i class="fa fa-vimeo-square" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-rss" aria-hidden="true"></i>
</div>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I'm trying to find a solution to right-align my content for my container which is holding an inline un-ordered list. The issue that I'm having is that my list contains mixed content (text, links and icons).
<!-- Header -->
<div class="container">
<div id="intro" class="text-right">
<ul class="list-inline">
<li>5420 Bond Road, Louisville, MS 39339</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
</div>
</div>
<!-- Nav Bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">MCBC Louisville</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>
Use this
<ul class="text-right list-inline">
You can use "pull-right" class. It's default class of bootstrap and by this you can pull the text or your content to the right side easily.
here is how you can add the class:
<div class="container">
<div id="intro" class="pull-right">
<ul class="list-inline">
<li>Address Goes Here</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
</div>
</div>
you need to add bootstrap class 'text-right' on "intro" div like below:
<div class="container">
<div id="intro" class="text-right">
<ul class="list-inline">
<li>Address Goes Here</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>
</div>
</div>
**add inline style float:right**
<div class="container">
<div id="intro" class="text-right" style="float:right">
<ul class="list-inline">
<li>Address Goes Here</li>
<li><a href="#"><i class="fa fa-facebook fa-lg" aria-hidden="true"></i>
</a></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i>
</li>
<li><a href="#"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i>
</a></li>
<li><a href="#"><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i>
</a></li>
</ul>
</div>
</div>
So, the way I've addressed this issue is I just took the content from the "intro" id and simply placed it on the nav-bar right aligned that was a much easier solution. I would have preferred to have a container above the navbar with right-aligned content, but I tried everything that was suggested here to no avail. I appreciate everyone's responses, you folks are amazing.
**Try this**
<ul class="text-right list-inline d-block">
<li>5420 Bond Road, Louisville, MS 39339</li>
<li><i class="fa fa-facebook fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></li>
<li><i class="fa fa-google-plus fa-lg" aria-hidden="true"></i></li>
</ul>