I am using fa fa icons in
<head>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<title> Ring Games </title>
</head>
<body>
<div class="div">
<ul>
<li> <i class="fa fa-facebook-official" > Find us on facebook </i></li>
<li> <i class="fa fa-users"> Users </i></l1>
<script src="https://use.fontawesome.com/73dc7d73e2.js"></script>
</ul>
</div>
<style>
.div ul {
position: absolute;
margin: 0;
padding: 0;
bottom: 10px;
display: flex;
justify-content: center;
width: 100%;
list-style: none;
text-decoration: none;
}
}
.div ul li:nth-child(1) {
transition-delay: 0.5s;
text-decoration: none;
}
.div ul li:nth-child(2) {
transition-delay: 0.5s;
line-spaceing: 10px;
}
.div ul li {
color: blue;
font-size: 1.5em;
padding-bottom: 10px;
cursor: pointer;
transition: 0.5s;
opacity: 1;
transform: translateY(20px);
line-height: 1000px;
}
</style>
</body>
It shows but then they're touching each other Is it possible to make 2 tags bellow each other? Because it doesn't work for me
I am using
Url:
https://fontawesome.com/v4.7.0/icons/ font awsome
Thank you,
Ring Games
If I understood your requirement correctly is this what you need?
.div {
display: flex;
flex-direction: column;
}
.div ul li:nth-child(1) {
transition-delay: 0.5s;
text-decoration: none;
}
.div ul li:nth-child(2) {
transition-delay: 0.5s;
}
.div ul li {
color: blue;
font-size: 1.5em;
padding-bottom: 10px;
cursor: pointer;
transition: 0.5s;
opacity: 1;
transform: translateY(20px);
}
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<div class="div">
<ul>
<li> <i class="fa fa-facebook-official"> Find us on facebook </i></li>
<li> <i class="fa fa-users"> Users</i></li>
</ul>
</div>
Related
I want the website to open the link after pressing the button, and not like it is now that I have to press the icon to open the link. I have to click on the small icon for the link to open and I want to make this link open as if you press the button
and if someone would like it, here are nice transitions, maybe someone will be useful
li {
display: block;
float: left;
}
nav ul {
list-style-type: none;
}
nav li {
width: 30px;
height: 30px;
text-align: center;
position: relative;
transition: 0.3s;
margin: 3rem;
}
nav li::before,
nav li::after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transition: 0.3s;
}
nav li::before {
background-color: white;
z-index: -1;
box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}
nav li::after {
background-color: #66CCFF;
transform: translate(1.5rem, 1.5rem);
z-index: -2;
}
nav li:hover {
transform: translate(1.5rem, 1.5rem);
color: white;
}
nav li:hover::before {
background-color: #66CCFF;
}
nav li:hover::after {
background-color: white;
transform: translate(-1.5rem, -1.5rem);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav id="social">
<ul>
<li><i class="fa fa-facebook-f"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</nav>
You should create a button and do this, and if its not what u want then please explain your question
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title></title>
</head>
<body>
<nav id="social">
<ul>
<li><i class="fa fa-facebook-f"><button type="button" name="button">Fb</button></i></li>
<li><i class="fa fa-instagram"><button type="button" name="button">Fb</button></i></li>
<li><i class="fa fa-twitter"><button type="button" name="button">Fb</button></i></li>
<li><i class="fa fa-github"><button type="button" name="button">Fb</button></i></li>
</ul>
</nav>
</body>
</html>
I already know. I thought you can't give a href out of the list, but you can
<li><i class="fa fa-github"></i></li>
Try adding this style. This basically expands your anchor to occupy the full <li> size.
nav li a {
height: 100%;
display: block;
}
Full previewable code:
li {
display: block;
float: left;
}
nav ul {
list-style-type: none;
}
nav li {
width: 30px;
height: 30px;
text-align: center;
position: relative;
transition: 0.3s;
margin: 3rem;
}
nav li::before,
nav li::after {
content: '';
position: absolute;
width: inherit;
height: inherit;
top: 0;
left: 0;
transition: 0.3s;
}
nav li::before {
background-color: white;
z-index: -1;
box-shadow: 0.2rem 0.2rem 0.5rem rgba(0, 0, 0, 0.2);
}
nav li::after {
background-color: #66CCFF;
transform: translate(1.5rem, 1.5rem);
z-index: -2;
}
nav li:hover {
transform: translate(1.5rem, 1.5rem);
color: white;
}
nav li:hover::before {
background-color: #66CCFF;
}
nav li:hover::after {
background-color: white;
transform: translate(-1.5rem, -1.5rem);
}
nav li a {
height: 100%;
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav id="social">
<ul>
<li><i class="fa fa-facebook-f"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</nav>
Hello I'm trying to add a nested nav in my main nav. The problem is the nested nav doesn't align properly under the main nav. Please see the screenshot. The nested nav doesn't align right under the main nav. The nested nav moved around 50% to the right. I'm using css flexbox to layout the nav.
body {
background-color: red; /* to see menu */
}
.nav-wrapper {
display: flex;
align-items: center;
justify-content: space-around;
height: 8rem;
width: 100%;
background-color: transparent;
transition: height 0.5s;
}
.heading a:link,
a:visited {
font-family: 'Alata', sans-serif;
font-size: 3rem;
text-transform: capitalize;
color: white;
cursor: pointer;
display: block;
position: relative;
transition: .3s ease;
}
.heading a:hover,
a:active {
transform: translate(.3rem, -.2rem);
color: white;
}
.navbar {
display: flex;
width: 45%;
justify-content: space-between;
list-style-type: none;
z-index: 1000;
position: relative;
}
.navbar li {
position: relative;
flex: 1 1 auto;
}
.nested {
display: flex;
flex-direction: column;
list-style-type: none;
position: absolute;
width: 100%;
}
.nested li {
width: 100%;
}
.navbar li a:link,
a:visited {
padding: 5px 0px;
cursor: pointer;
color: white;
display: block;
transition: .3s;
}
.navbar li a:hover,
a:active {
transform: scale(1.2);
color: white;
background: rgba(0, 0, 0, 0.082);
}
.toggler {
display: none;
}
<div class="nav-wrapper">
<h1 class="heading">HeaderName</h1>
<div class="toggler">
<i class="fas fa-bars"></i>
</div>
<ul class="navbar">
<li> Home
<ul class="nested">
<li>
<i class="fas fa-user-alt"></i> About Us
</li>
<li><i class="fas fa-concierge-bell"></i> Services</li>
</ul>
</li>
<li>
<i class="fas fa-user-alt"></i> About Us
</li>
<li><i class="fas fa-concierge-bell"></i> Services</li>
<li><i class="fas fa-briefcase"></i> Portfolio</li>
<li><i class="fa fa-share" aria-hidden="true"></i> Contact</li>
</ul>
</div>
Finally got the got the problem. there was padding on the nested nav. had to add padding:0 property to css. My suggestion is to add margin:0 and padding:0 to ul, li ,a property.
Why is my social media icons not showing in my footer? Need help finding out why my social media icons are not appearing in my footer.
Instead the social media icons is appearing in the center of the page so it seems like the position has jumped out of the doc.
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
font-family: 'Open Sans', sans-serif;
}
i {
font-family: FontAwesome !important;
padding-left: 25px;
}
i.fa.fa-facebook {
font-family: FontAwesome !important;
padding-left: 30px;
}
body{
margin: 0;
padding: 0;
}
footer {
background: #19252A;
}
ul{
display: flex;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
ul li{
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background: #fff;
text-align: centre;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .fa {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .fa {
color: #fff;
transform: rotateX(360deg);
}
ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #55acee;
}
ul li:nth-child(3) a:before{
background: #cd201f;
}
ul li:nth-child(4) a:before{
background: #e4405f;
}
.container{
width:1000px;
margin:auto;
overflow:hidden;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<footer>
<div class="container">
<div class="box2">
<p>
**************************************************************
</p>
<ul class=social-media-icons>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
Try this, Hope this help thank you
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<style>
*{
font-family: 'Open Sans', sans-serif;
}
i {
font-family: FontAwesome !important;
padding-left: 25px;
}
i.fa.fa-facebook {
font-family: FontAwesome !important;
padding-left: 30px;
}
body{
margin: 0;
padding: 0;
}
footer {
background: #19252A;
}
.box2 {
display: flex;
align-items: center;
justify-content: space-around;
}
ul{
display: flex;
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) */
}
ul li{
list-style: none;
}
ul li a {
width: 80px;
height: 80px;
background: #fff;
text-align: centre;
line-height: 80px;
font-size: 35px;
margin: 0 10px;
display: block;
border-radius: 50%;
position: relative;
overflow: hidden;
border: 3px solid #fff;
z-index: 1;
}
ul li a .fa {
position: relative;
color: #262626;
transition: .5s;
z-index: 3;
}
ul li a:hover .fa {
color: #fff;
transform: rotateX(360deg);
}
ul li a:before {
content: '';
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 100%;
background: #f00;
transition: .5s;
z-index: 2;
}
ul li a:hover:before {
top: 0;
}
ul li:nth-child(1) a:before{
background: #3b5999;
}
ul li:nth-child(2) a:before{
background: #55acee;
}
ul li:nth-child(3) a:before{
background: #cd201f;
}
ul li:nth-child(4) a:before{
background: #e4405f;
}
.container{
width:1000px;
margin:auto;
overflow:hidden;
}
</style>
</head>
<!DOCTYPE html>
<html>
<body>
<footer>
<div class="container">
<div class="box2">
<p>
**************************************************************
</p>
<ul class=social-media-icons>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
</div>
</div>
</footer>
</body>
</html>
I have this problem with the footer since I added these properties to my background image, If I don't add these properties, then the page will have a blank space between the background image and the footer, can anyone help please?:
margin-bottom: -100px;
padding-bottom: 0;
CSS and HTML code below:
#import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah:100,200,300,400,500,600,700|Special+Elite:100,200,300,400,500,600,700');
/*---------------------------------Navigation Bar*/
/*----Navbar Buttons*/
.navbar-nav li a {
color: #ffffff !important;
font-family: "Gloria Hallelujah" , sans-serif;
text-transform: uppercase;
font-size: large;
font-weight: 500;
text-decoration: none;
border:none;
padding: 8px 8px;
margin:4px 2px;
}
nav li a,
nav li a:after,
nav li a:before {
transition: all .5s;
}
#navbar-select-color:hover {
color: #c8c8c8 !important;
}
#logo-transparent {
opacity: 1.0;
filter: alpha(opacity=50);
transition-timing-function: ease-in-out;
transition: all .5s;
}
#logo-transparent:hover {
opacity: 0.8;
filter: alpha(opacity=100);
transition-timing-function: ease-in-out;
transition: all .5s;
}
/*----Navbar Animation*/
nav.stroke ul li a {
position: relative;
}
nav.stroke ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width:100%;
}
/*---------------------------------Footer*/
footer {
background: #212529;
color: white;
margin-top:100px;
bottom: 0;
}
footer a {
color: #fff;
font-size: 14px;
transition-duration: 0.2s;
}
footer a:hover {
color: #ced3d7;
text-decoration: none;
}
.copy {
font-size: 12px;
padding: 10px;
border-top: 1px solid #FFFFFF;
}
.footer-middle {
padding-top: 2em;
color: white;
}
/*---------------------------------Social Icons*/
/* footer social icons */
ul {
list-style-type: none;
display: flex;
justify-content: center;
}
ul .social-network {
display: inline;
margin-left: 0 !important;
padding: 0;
float: center;
}
ul .social-network li {
display: inline;
margin: 0 5px;
list-style: none;
}
.social-network a.icoTwitter:hover i {
color: #007bb7;
}
.social-network a.icoFacebook:hover i {
color: #3B5998;
}
.social-network a.icoYoutube:hover i {
color: #c4302b;
}
.social-circle li a {
display: block;
position: relative;
margin: 15px 15px 15px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
text-align: center;
width: 65px;
height: 65px;
font-size:40px;
}
.social-circle li i {
margin: 0;
line-height: 30px;
text-align: center;
}
.social-circle li a:hover i,
.triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #595959;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
.social-network a {
background-color: #F9F9F9;
}
/*---------------------------------Background*/
body, html {
height: 100%;
}
img {
width:100%;
height:auto;
position: relative;
}
#bg {
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
margin-bottom: -100px;
padding-bottom: 0;
}
<!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">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<title>Home|The Monkees</title>
</head>
<body>
<header>
<!--------------------Navigation-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark stroke">
<a class="navbar-brand" href="index.html">
<img src="assets/image/LOGO.png" id="logo-transparent" alt="logo" style="width:143px;">
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link " id="navbar-select-color" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navbar-select-color" href="music.html">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navbar-select-color" href="video.html">Video</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navbar-select-color" href="shop.html">Shop</a>
</li>
<li class="nav-item">
<a class="nav-link" id="navbar-select-color" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<section>
<div id="bg">
<img src="assets/image/monkees_portrait_402.jpg" alt="">
</div>
</section>
<footer class="mainfooter bg-dark " role="contentinfo">
<div class="footer-middle">
<ul class="social-network social-circle">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-youtube"></i></li>
</ul>
<div class="col-md-12 copy">
<p class="text-center">© Copyright 2019 - The Monkees. All rights reserved. // About // Privacy Policy // Terms of Use // Contact </p>
</div>
</div>
</footer>
</body>
</html>
Some advice on the color of the footer and navbar compared to the image would be a greatly appreciated. This is for a project.
Thanks
Since you did not upload the images I haven´t been able to test it properly, if you wanted the footer to be right at the bottom, change the following:
`footer {background: #212529;
color: white;
margin-top:100px;
position: absolute;
/*--Your body does not cover the entire screen´s height therefore the
-20px--*/
bottom: -20px;
}`
I cannot undestand why you give it a margin-top, but it may have to do with the rest of the content or libraries we do not have acces to (bootstrap, images..), I hope it still helps :)
You can adjust footer class. specially margin-top
like this:
footer {
margin-top:50px;
}
In footer tag you just need to remove the margin-top:100px;
only this
footer {
background: #212529;
color: white;
bottom: 0;
}
this will work
I want to make some fancy social buttons with Font Awesome, CSS3 and lists in HTML. It should look like this. But now it is not possible to click on the anchor (a-tag).
How can I accomplish this?
ul {
list-style: outside none none;
}
ul li {
display: block;
float: left;
background-color: #099;
margin-right: 10px;
padding: 10px 0px;
text-align: center;
width: 40px;
opacity: 0.2;
transition: all 0.2s ease-in-out 0s;
}
li::before {
color: #FFF;
font-size: 35px;
}
ul li a {
color: transparent;
font: 0px/0 a;
white-space: nowrap;
}
ul li:hover {
opacity: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<ul id="menu-social" class="menu">
<li id="menu-item-googleplus" class="fa fa-google-plus menu-item menu-item-googleplus">
Google+
</li>
<li id="menu-item-facebook" class="fa fa-facebook menu-item menu-item-facebook">
Facebook
</li>
</ul>
Add position relative to the li elements and then stretch the anchor.
ul li {
display: block;
float: left;
background-color: #099;
margin-right: 10px;
padding: 10px 0px;
text-align: center;
width: 40px;
opacity: 0.2;
transition: all 0.2s ease-in-out 0s;
/* Add position */
position:relative;
}
ul li a {
color: transparent;
font: 0px/0 a;
white-space: nowrap;
/* Stretch a element */
position: absolute;
left:0;
top:0;
width:100%;
height: 100%;
}