How come when someone mouses over the Google Icon, Instagram and Facebook Icon they appear faded afterwards.
This also is happening in mobile responsive menu where text fades and doesn't return to its original color state.
Website is hopkinslawokc.com
Hi you have not opacity set, But if you hover over the icons than got he a opacity. If you give the li > id give a opacity. so li id="menu-item-40 opacity: 0.35;
// Social Hover
jQuery(".social-icon").hover(function(){
jQuery(this).animate({ opacity: 0.35 }, 150);
}, function(){
jQuery(this).animate({ opacity: 1 }, 150);
});
/* this bit of code was found in
http://hopkinslawokc.com/wp-content/themes/goodspace-v1-11/javascript/gdl-scripts.js
*/
ul {
list-style: none;
font-size: 36px;
}
ul li {
float: left;
margin-right: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="social-icon">
<i class="fa fa-facebook"></i>
</li>
<li class="social-icon">
<i class="fa fa-twitter"></i>
</li>
<li class="social-icon">
<i class="fa fa-google"></i>
</li>
</ul>
It is working just as expected except what the first answer said...if you want it to appear faded from the get go then you need to add it in the css.
this is the css only solution.
ul {
list-style: none;
font-size: 36px;
}
ul li {
float: left;
margin-right: 20px;
opacity:.35;
transition: all 150ms linear;
}
ul li:hover{opacity:1;}
.fa-facebook{color:blue;}
.fa-twitter{color:#2b2626;}
.fa-google{color:#ff0000;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="social-icon">
<i class="fa fa-facebook"></i>
</li>
<li class="social-icon">
<i class="fa fa-twitter"></i>
</li>
<li class="social-icon">
<i class="fa fa-google"></i>
</li>
</ul>
Related
I have a footer at the bottom of my website which contains some fontawesome icons:
I have made the icons hoverable, but how can I make them take me to a website (such as GitHub for the GitHub icon)?
Demo of what I have so far:
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 10px;
}
i:hover {
color: #AEC6CF;
transition: 0.4s;
cursor: pointer;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<div class='footer'>
<i class="fab fa-github" style='font-size:30px'></i>
<i class="fab fa-stack-overflow" style='font-size:30px'></i>
<i class="fab fa-github" style='font-size:30px'></i>
<br></br>
<p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>
Edit:
If i use <i class="fab fa-github" style='font-size:30px'></i> as suggested, while it works, I now have a icon in a permanent state of active: How can i stop this from happening?
Edit 2:
The solution was to just specify the color for a link. Thanks for the suggestion CBroe.
a:link, i {
color: black;
}
You could use the HTML anchor tag to link to either a URL. Change your HTML to this, it should solve your problem.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<div class='footer'>
<i class="fab fa-github" style='font-size:30px'></i>
<i class="fab fa-stack-overflow" style='font-size:30px'></i>
<br></br>
<p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>
You can put font awesome icons in an anchor tag with a href.
<i class="fab fa-github" style='font-size:30px'></i>
im trying to fire a class when a hover a button, basically inside of my href i have a i icon tag that needs to change color: but is not working:
my css and html:
.catalog-icons i:hover{
color: #ba658a;
}
.catalog-icons .btn-icon:hover ~.catalog-icons i:hover{
color:#ba658a;
background-color: white;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">
<i class="fontello-icon icon-vet"></i>
</a>
</li>
I added an image since your code does not provide any.
Your rule should be simple:
.your_hovered_element_class:hover affected_elemnt_inside
in your case once .btn-icon is hovered, you change the i background color
.btn-icon:hover i{
background-color: #ba658a;
}
i img {
height: 1em;
}
<li class="list-inline-item">
<a class="btn btn-icon" href="">link text
<i class="fontello-icon icon-vet"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-person-outline-128.png" /></i>
</a>
</li>
My code is given below,
<ul style="list-style:none">
<li><i class="fa fa-hospital-o first" aria-hidden="true"></i>arrows</li>
<li><i class="fa fa-cogs" aria-hidden="true"></i>battery</li>
<li><i class="fa fa-university" aria-hidden="true"></i>bell</li>
<li><i class="fa fa-industry" aria-hidden="true"></i>bicycle</li>
<li><i class="fa fa-music" aria-hidden="true"></i>circle</li>
<li><i class="fa fa-users" aria-hidden="true"></i>deaf</li>
</ul>
So, onclick of a link I need to change the color of content & icon in the link.
css:
ul li:active {
color:green;
}
It is not working. When selecting a particular list item, I need to change the color. Can anyone please help me with this?
Check this solution hope it will help :
$(document).ready(function(){
$("ul > li").click(function(){
$("ul > li").removeClass("active");
$(this).addClass("active");
});
});
ul{
list-style:none;
}
ul li {
position: relative;
}
li a {
text-decoration: none;
}
li a i {
position: absolute;
left: 0px;
}
li a {
padding-left: 32px;
}
li.active a {
color: green !important;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="active"><i class="fas fa-hospital first" aria-hidden="true"></i>arrows</li>
<li><i class="fas fa-cogs" aria-hidden="true"></i>battery</li>
<li><i class="fas fa-university" aria-hidden="true"></i>bell</li>
<li><i class="fas fa-industry" aria-hidden="true"></i>bicycle</li>
<li><i class="fas fa-music" aria-hidden="true"></i>circle</li>
<li><i class="fas fa-users" aria-hidden="true"></i>deaf</li>
</ul>
You got i as item ? thats weird but w/e i also dont get what you want a list but w/e
<ul>
<li><a class="something" href="#">arrows</a></li>
</ul>
.something:active {
background-color: white;
}
again i dont get the question, or what your asking it seems your marking way to much on html, you need to clean your code
I am building a responsive website using Bootstrap and Less.
I have put in some social Icons using font awesome which have worked fine.
However, my logo in meant to be in the center and was before I put the social icons in but now I have added them they are pushing my logo to the left.
Here is the html
<header>
<div id="social">
<ul class="pull-right">
<li><i class="fa fa-facebook-official fa-2x"></i></li>
<li><i class="fa fa-twitter fa-2x"></i></li>
<li><i class="fa fa-linkedin-square fa-2x"></i></li>
<li><i class="fa fa-google-plus-square fa-2x"></i></li>
</ul>
</div>
<div class = "logomove">
<div id="logo" class="text-center">
<img src="assets/images/logo.png" alt="Logo" />
</div>
</div>
</header>
And the CSS:
#social {
li {list-style: none; display: inline-block; padding:3px; float:right; color:#brand-primary; }
}
I have also tried positioning the logo 250px across the page to try and center it but it will not work.
Any suggestions much appreciated, I'm really new to this so sorry if I am missing something.
The static positioning of your #social element is pushing the logo away. You have to make either of them absolute to make it not effect the other element.
Try like this:
header{
position:relative;
}
#social {
li {
list-style: none;
display: inline-block;
padding:3px;
float:right;
color:#brand-primary;
position:absolute;
right:0px;
top:0px;
}
}
You might need to adjust the top and right values.
I'm using a service which doesn't allow me to modify the code, but I"m able to add my own CSS. I am trying to change the CSS of a specific Link inside a li.
Here is my code:
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I want to select only the very first list item and tweak the css settings of the link within it - I want to make the background color and text different. Using the following allows me to change somethings but not the actual text within that li.
.kn-link-1 {
}
I also want to make sure that this change only happens for this specific instance where the parent id="view_81".
Can someone help find the right way to select just that
CSS is not the right place where you should change the content, anyway if you have no other choice, you could use the :after selector to do the following trick:
#view_81 > ul > li:nth-child(1) > a > span {
display: none;
}
#view_81 > ul > li:nth-child(1) > a:after {
background-color: red;
content: "your text";
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span>
</li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span>
</li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span>
</li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span>
</li>
<li class="kn-link-5"><span>Add Comments</span>
</li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span>
</li>
</ul>
</div>
have you tried:
#view_81 ul li.kn-link-1
or
#view_81 ul li:first-child
To clarify my examples: "#" selector in CSS means "the one with the following ID" and then i'm telling the "ul" that comes after that and then the "li" that comes after that which has this class "kn-link-1" or which is the first item inside the tag (:first-child subselector).
I hope some of them help.
use this style:
li:first-of-type span
{
}
also be sure that your style link is last in your style references. If this does not help, declare your styles with "!important" like here:
li:first-of-type span
{
color:red !important;
}
using the selectors: #view_81 .kn-link-1 a targets the element with id="view_81" and the descendant element with class="kn-link-1" and the a tag inside that to change the background and text color.
#view_81 .kn-link-1 > a {
background: red;
color: yellow;
}
<div class="kn-menu kn-view view_81" id="view_81">
<ul class="kn-tab-menu kn-grid-6">
<li class="kn-link-1"><span><i class="fa fa-bullseye"></i> I'm On Site</span></li>
<li class="kn-link-2"><span><i class="fa fa-pencil-square-o"></i> 1. Onsite Staff Signature</span></li>
<li class="kn-link-3"><span><i class="fa fa-pencil"></i> 2. Service/Signature</span></li>
<li class="kn-link-4"><span><i class="fa fa-ban"></i> 3. N/A - R</span></li>
<li class="kn-link-5"><span>Add Comments</span></li>
<li class="kn-link-6"><span><i class="fa fa-check"></i> 4. Completed</span></li>
</ul>
</div>
I would stylize the css like this:
<style>
#view_81 .kn-link-1{
padding: 50px;
background-color: gray;
}
#view_81 .kn-link-1 a{
text-decoration: none;
}
#view_81 .kn-link-1 span{
color: white;
font-weight: bold;
text-shadow: 1px 2px 2px black;
}
</style>
This css only applies to the class .kn-link-1 within id #view_81.
I added a little basic css for your testing purposes, but you get the point.