I want my links to display a font-awesome icon next to them when hovered over. The whole line looks like this:
link <span class="someicon"></span>
How do I make class "someicon" visible when class "link" is hovered over?
EDIT:
Thanks everybody, I came up with an even better solution. No need for extra classes and DOM elements:
.link:hover::after {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
content: "\00a0\f040";
text-decoration: none;
}
This is basic CSS.
.someicon {
display: none;
}
.link:hover + .someicon {
display: inline-block;
}
link <span class="someicon">i'm an icon</span>
Personally though I would make the icon part of the link so it can be clicked too!
a span {
opacity: 0;
}
a:hover span {
opacity: 1;
}
link <span class="someicon">i'm an icon</span>
use this
.icon{
visibility:hidden;
}
.link:hover+.icon{
visibility:visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>
link <span class="icon"><i class="icon-li icon-ok"></i></span>
Related
I am trying to change the icon permanently from "add" to "done" after I click the icon. If I click the icon again, it should change from "done" to "add."
I am wondering if it is possible to do this with CSS without using Javascript.
.material-icons::before {
content: "add";
}
section:active .material-icons::before {
/*background-color: red;*/
content: "done";
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">
<section>
<span id="btn1" class="material-icons"></span>
</section>
Here's the simplest CSS checkbox hack solution, you can start from here:
/* The hack */
input[type=checkbox] {
display:none;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
cursor: pointer;
}
/* Default State */
input[type=checkbox] + section .material-icons::before {
content:"add";
}
/* Toggled State */
input[type=checkbox]:checked + section .material-icons::before {
content:"done";
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans"
rel="stylesheet">
<label>Click Me
<input type="checkbox">
<section>
<span id="btn1" class="material-icons"></span>
</section>
</label>
The way this works, is there are two <span>'s, (one with the add and one with the done icon) and a checkbox all stacked on top of each other, an the done icon is hidden. The add icon is pointer-events: none;, and when you click on it the checkbox gets checked. Then the add icon gets hidden, and the done icon gets shown.
(Only works if you click directly on the text)
.done,
.add, .done {
position: absolute;
top: 0;
left: 0;
background-color: white;
}
.done { display: none; }
.add { display: inline-block; pointer-events: none; }
label {
display: inline-block;
cursor: pointer;
position: relative;
}
input[type=checkbox] { position: absolute; top: 0; left: 0; }
input[type=checkbox]:checked~.done { display: inline-block; }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">
<input type="checkbox">
<div class="add">
<span id="btn1" class="material-icons first">add</span>
</div>
<div class="done">
<span id="btn1" class="material-icons">done</span>
</div>
Using your own html/css stuff:
Let me know if this helped you.
.material-icons.md1::before{
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 33px;
content:"add";
}
.btnwrap:hover .material-icons.md1::before{
content:"done";
}
Codepen
I have a third party product which outputs an icon via an <img> tag with a background-image set via css.
I could probably write some javascript to change the html tag itself to something different but I would rather change the css to display a FontAwesome icon using the :before and content="{FontAwesomeText}".
However, I cant get this to work...does someone know if this is possible to do this?
Please see
.x-tree-icon-leaf:before {
content: "";
font-size: 0.6em;
position: relative;
top: -3px;
}
.x-tree-icon-leaf {
font-family: FontAwesome;
width: 20px;
height: 20px;
display: inline-block;
color: #5fa2dd;
}
https://jsfiddle.net/uz9q6m33/
Your jsFiddle did not properly import the FontAwesome library.
You can't just copy paste the character and place it inside content, you need the proper unicode value of that specific icon, which is: \f06c
img cannot have pseudo elements, use a classed sibling or parent for the icon and hide the image with display: none.
Working code:
.x-tree-icon-leaf, .x-tree-icon-text::before {
font: normal normal normal 14px/1 "FontAwesome";
display: inline-block;
color: #5fa2dd;
}
.x-tree-icon-leaf::before, .x-tree-icon-text::before {
content: "\f06c\00a0";
font-size: 1em;
position: relative;
top: -1px;
}
img.x-tree-icon-leaf { display: none; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<!-- working with normal span -->
<div> <span class="x-tree-icon-leaf"></span> <span>Hello</span> </div>
<!-- hiding image then applying icon to text-span -->
<div> <img class="x-tree-icon-leaf"> <span class="x-tree-icon-text">Hello</span> </div>
jsFiddle fork: https://jsfiddle.net/azizn/1y3jwnsg/
Note: Add \00a0 at the end of content:'' string to force a space for consistency.
The icon is applied to x-tree-icon-leaf and x-tree-icon-text at the same time. When x-tree-icon-leaf is an img tag, it will be hidden.
I have several hundreds of icons around a legacy application:
<img class="date-picker" src="/image/datepicker.png">
Following CSS removes the datepicker.png but the font awesome icon is not displayed
.date-picker {
background-image: none;
}
.date-picker:after{
font-family: FontAwesome;
content: "\f073";
color:grey;
font-size:25px;
}
Is there a way how to achieve this without changing the IMG tags?
Pseudo-elements only get applied to images whose src attributes fail to load. If the image successfully loads, the pseudo-element will not be used.
One thing you can do is apply this to the parent element, but this obviously depends on your markup:
div {
height: 100px;
width: 100px;
position: relative;
}
div img {
display: none;
}
div::after {
content: 'foo';
position: absolute;
top: 0;
}
<div>
<img src="http://placehold.it/100x100" />
</div>
Here we hide the img element and apply the pseudo-element to the div container, then absolutely-position the pseudo-element to sit inside (well, on top of) the div.
You could wrap the image in a span and use the same class(es).
img.date-picker {
display: none;
}
span.date-picker:after {
font-family: FontAwesome;
content: "\f073";
color: grey;
font-size: 25px;
display: inline-block;
margin: 1em;
/* demo only */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<span class="date-picker"><img class="date-picker" src="/image/datepicker.png"></span>
Using jquery you can find all the img tag and wrap the img in a figure tag and apply the icon class to that.
As a relative newbie to CSS and HTML5, I have been using a CSS file that I found at Bootstrap checkbox replacement to display font awesome checkboxes and radio buttons. It works fine in Chrome but not in Internet Explorer even though the W3C validator shows it as valid.
Does anyone have any ideas what is wrong?
/* CSS used here will be applied after bootstrap.css */
.demo {
padding:50px;
}
.demo label{
top:3px; left:15px;
margin-right:30px;
position:relative;
}
input.faChkRnd, input.faChkSqr {
visibility: hidden;
}
input.faChkRnd:checked:after, input.faChkRnd:after,
input.faChkSqr:checked:after, input.faChkSqr:after {
visibility: visible;
font-family: FontAwesome;
font-size:25px;height: 17px; width: 17px;
position: relative;
top: -3px;
left: 0px;
background-color:#FFF;
display: inline-block;
}
input.faChkRnd:checked:after {
content: '\f058';
}
input.faChkRnd:after {
content: '\f10c';
}
input.faChkSqr:checked:after {
content: '\f14a';
}
input.faChkSqr:after {
content: '\f096';
}
Edited
So just to clarify, if you open up http://www.bootply.com/H289A4AIGZ# in Chrome the checkboxes display correctly but when you open it up in IE11 they do not appear at all - regardless of the valid CSS.
I've fought this before, and if I remember correctly, IE hides the :before pseudo element along with the checkbox, or just doesn't support :before on checkboxes.
The best I have done is here: http://jsfiddle.net/rally25rs/MRa2H/
The 3rd (black colored) checkbox works in IE but the other 2 don't.
It works by using the sibling selector to decide which icon to show.
.works-in-ie input[type="checkbox"]:checked ~ .checked
{
display: inline-block;
}
.works-in-ie input[type="checkbox"]:checked ~ .unchecked
{
display: none;
}
.works-in-ie input[type="checkbox"] ~ .checked
{
display: none;
}
.works-in-ie input[type="checkbox"] ~ .unchecked
{
display: inline-block;
}
.works-in-ie input[type="checkbox"] {
display: none;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="works-in-ie">
<label><input type="checkbox"/><i class="fa fa-arrow-down unchecked"></i><i class="fa fa-arrow-up checked"></i> Click Me</label>
</div>
Here is a screenshot of this answer and the code snippet working in IE11:
I've been playing around with this, and I thought it would be pretty simple. What I'm trying to do is hover over the 'NEW' label. Once in its hover state, change the content from 'NEW' to 'ADD' using only CSS.
body{
font-family: Arial, Helvetica, sans-serif;
}
.item{
width: 30px;
}
a{
text-decoration:none;
}
.label {
padding: 1px 3px 2px;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
background-color: #bfbfbf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
}
.label.success {
background-color: #46a546;
}
.item a p.new-label span{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span{
display: none;
}
.item:hover a p.new-label{
content: 'ADD';
}
<div class="item">
<a href="">
<p class="label success new-label"><span class="align">New</span></p>
</a>
</div>
Here's a JSFiddle to show you what I'm working with.
The CSS content property along with ::after and ::before pseudo-elements have been introduced for this.
.item:hover a p.new-label:after{
content: 'ADD';
}
JSFiddle Demo
This exact example is present on mozilla developers page:
::after
As you can see it even allows you to create tooltips! :) Also, instead of embedding the actual text in your CSS, you may use content: attr(data-descr);, and store it in data-descr="ADD" attribute of your HTML tag (which is nice because you can e.g translate it)
CSS content can only be usef with :after and :before pseudo-elements, so you can try to proceed with something like this:
.item a p.new-label span:after{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span:after {
content: 'ADD';
}
The CSS :after pseudo-element matches a virtual last child of the
selected element. Typically used to add cosmetic content to an
element, by using the content CSS property. This element is inline by
default.
.label:after{
content:'ADD';
}
.label:hover:after{
content:'NEW';
}
<span class="label"></span>
This little and simple trick I just learnt may help someone trying to avoid :before or :after pseudo elements altogether (for whatever reason) in changing text on hover. You can add both texts in the HTML, but vary the CSS 'display' property based on hover. Assuming the second text 'Add' has a class named 'add-label'; here is a little modification:
span.add-label{
display:none;
}
.item:hover span.align{
display:none;
}
.item:hover span.add-label{
display:block;
}
Here is a demonstration on codepen: https://codepen.io/ifekt/pen/zBaEVJ