I hope this question was not already asked somewhere in this forum. I swear I searched it!
My goal is to change the "tag" icon when mouse is over it. Namely, I would like to let the "tags" icon appear replacing the old one.
I am quite sure there is an easy solution out there; probably using
.fa-tag:hover {
background: url(something);
}
Here the page of my website with the .fa-tag icons : http://wordsinthebucket.com/about
Thank you in advance for your attention.
I would have two icons but have only one visible at a time, toggling them based on :hover state. I feel this is more flexible then messing with background.
.change-icon > .fa + .fa,
.change-icon:hover > .fa {
display: none;
}
.change-icon:hover > .fa + .fa {
display: inherit;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet" />
<span class="change-icon">
Tags
<i class="fa fa-tags"></i>
<i class="fa fa-gear"></i>
</span>
.fa-camera-retro:hover:before{
content: "\f02d";
}
demo - http://www.bootply.com/oj2Io7btD7
you will need to change the content of :before pseudo element on hover
here is the list of complete fontawesome content codes
http://astronautweb.co/snippet/font-awesome/
You can by adding CSS like:
.fa-tag:hover:before {
content: "\f02c"
}
which changes the content in the :before pseudo element when hovering over the .fa-tag.
I'm quite sure it's not a good idea to overwrite the .fa-tag styling. At least scope it by a parent class, e.g. .entry-content .fa-tag:hover:before (although I would prefer a better class name like author-tags.
It's not a good idea to overwrite fa-tag as you might need it somewhere else in a different scope. I would go like this:
http://antonakoglou.com/change-font-awesome-icon-content-hover/
which is actually the second part of this answer that I just discovered:
https://stackoverflow.com/a/19503006
Related
I was asked to take over a company's website built using a builder I'm not familiar with.
I need to remove a few buttons, tabs, etc. (The site needs to be rebuilt.) Until we get the green light I'm having to remove items here and there with CSS.
I was able to remove the following button
"Rental"
with the following:
a.search-btns[data-search=rental] {
display: none;}
But I trying to remove this tab
<li class="tab"> Rental</li>
does not work using this method.
a.tab[data-tabtitle=Rental Equipment] {
display: none;}
I know just enough about CSS to be dangerous. Can someone help with this?
Thanks in advance!
Change css code to:
li.tab a[data-tabtitle="Rental Equipment"]
{
display: none;
}
In some CSS contexts, spaces are optional. For example, in a property declaration display:none; is the same as display: none;. However, as you can see in your selector scenario, they do matter.
a.tab[data...] is selecting for all links that have the class .tab and the data-attr you specified. For your scenario to work, you want something like: tab > [data...]
.tab > [data-tabtitle="demo"]{
display: none;
<ul>
<li class="tab">hidden</li>
<li class="tab">not hidden</li>
</ul>
I suggest checking out some documentation on CSS selectors to learn more.
https://www.w3schools.com/cssref/css_selectors.asp
Try changing it to double quotes.
a.tab[data-tabtitle="Rental Equipment"]
I tried to change the fonts and styles in my joomla website, and to achieve this I installed the following plugin:
Consequently the body font was changed, however the inline styles were not.
How can i disable or remove inline styles, like the following one?
<span style="font-size: 14pt; font-family: 'arial black', 'avant garde';">Test</span>
I need a lot help :)
From the looks on the image it appears to me that this plugin of yours uses CSS selectors to choose which elements it will affect.
Given that my assumption is correct, if your span tag is not being affected its likely because there is a conflict in the CSS selection order.
My suggestion to fix your problem is to add a specific class to your span tag, like for example <span class="myNewShinySpanTag"> and then add the line span .myNewShinySpanTag to the text box of your plugin.
Hope it helps!
good way is find the inline css and remove it.
but if you can not find it you can write an high Priority css to disable this properties.
you should find an unique selector for this code:
span
{
font-size:unset !important;
font-family:unset !important;
}
I have a glyph font and want to use it to achieve this effect:
My code so far:
<div class="ico linkedin">linkedin</div>
.ico {border-radius:10em; background:black; color:white}
.linkedin {visibility:hidden;}
.linkedin:first-letter {
font-family:'JustVector';
font-size:900%;
text-indent:1em;
visibility:visible
}
This does the trick in Chrome, but not in Firefox or Internet Explorer 9. Also, this isn't accessible, because JAWS doesn't read the hidden or display:none elements.
So, I tried something like:
.linkedin {position:absolute; left:-5em}
.linkedin:first-letter {/*etc*/ position:absolute; left:6em}
But it doesn't work. Is there a proper and accessible way to achieve this?
The accessible way to use icons is to use img elements with adequate alt attributes, e.g.
<img src=smiley.gif alt="Just joking!">
Icon fonts (which is what you probably mean by “gliph font”) have inherent accessibility problems. Using e.g. letters and trying to fool browsers into rendering them as icons with CSS means that with CSS turned off, there are just the letters, which are wrong information. Using elements with empty content and CSS-generated content suffers from the same problem, except that instead of wrong information, there is no information, when CSS (or at least the visual part of CSS) is off.
I don't think there is a truly accessible way of using icon fonts currently. I know it's a bit span-tastic but this what my approach to this would be.
Firstly wrap the text in a span so we can hide it. And add another span for the icon
<div class="ico">
<span aria-hidden="true" class="linkedin"></span>
<span class="hide">linkedin</span>
</div>
Notice I've added aria-hidden="true" to my icon span. This is to prevent the letter (used to render the icon) from being read out by the screen reader.
Now you can safely hide the text so it is accessible by screen readers and apply your icon using the before selector.
.linkedin:before {
font-family: 'JustVector';
content: 'l';
}
.hide{
position: absolute;
top: -9999px;
left: -9999px;
}
Thanks for the answers, they present me a few questions about how to deal with this.
Well, finally I go with the easy one. I think it's accesible and more semantic, also works if there's no CSS in the page, also it's possible to be printed.
I have separated the first letter (the icon) with a margin of surrounding text, and I left the layer with overflow:hidden;. Then, have adjusted margin and line-height, to focus well the character/icon inside the circle.
The final code:
.ico {background:black; border-radius:10em; height:5em; overflow:hidden; position:relative; width:5em; color:white;}
.linkedin:first-letter {font-family:'JustVector'; font-size:400%; line-height: 1.3em; margin-left:0.2em; margin-right:1em;}
With that solution, screenreaders reads "linkedin" and it only display the icon for other users giving them enough information.
Is there anyway to change a text input's value (the default text that displays) with CSS?
I'm optimizing a site for mobile and I want the text 'search this site' to be shortened to 'search'.
That really isn't what CSS is for.
CSS is for styling your content; HTML is for the actual content itself.
If you need to modify the content after the HTML has loaded, then that's what Javascript is for.
So the real answer to your question is: either modify the HTML directly, or use Javascript.
There are some things you can do with CSS that affect the content, such as adding additional text in-front of or behind an element using the :before and :after pseudo-selectors, but that won't help you in this case, and shouldn't be used for the kind of content change work that you're talking about.
By the way, slightly off-topic, but if you're using input field value as a prompt text, you may want to consider looking into the HTML5 placeholder attribute instead. This also doesn't address your question, but it does sound like it might be something that could be useful to you.
No, CSS cannot change the value attribute of an input, or indeed any attribute of any element.
Late to the party but using "content" attribute, within element:before will accomplish what you need as seen in http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string
I was able to manipulate a button content value via jQuery toggleClass, switching between the following classes:
.open_button:before{
content:"open";
}
.close_button:before{
content: "close";
}
I understand the qualms, but I do feel like toggleClass provides an elegance that justifies the CSS trick. Otherwise one would be using a toggle function with nested css switch functions. I personally think avoiding the nested jQuery functions is better looking.
If you want to change the value use the HTML "value" attribute;
example:
<input type="submit" value="ENVIAR">
that will change the default "submit" value to "enviar"
For me the solution was
<button type="submit" class="mybutton" name="add">
<span class="add">Add new</span>
</button>
therefore the css will be :
.mybutton:hover .add:after{content="0"}
This solution is little bit tricky,
but it's always work for me.
/*CSS Code*/
#media screen and (max-width: 768px) {
.showondesktop {
display: none !important; }
}
#showonmobile {
display:none;
}
#media screen and (max-width: 767px) {
#showonmobile {
display:block; }
}
<!--HTML Code->
<div class="showondesktop"> search this site </div>
<div id="showonmobile"> search </div>
When the website is visited from Mobile it will be displayed "search", but when visited from Desktop it will be displayed "search this site".
Image Preview:
Output-Desktop-view.jpg
Output-Mobile-view.jpg
so easy, just type in for example:
button {
color: red;
font-family: sans-serif;
}
there you are,
the buttons take all the inputs with values with for example submit/reset/.etc..
Can you have a look at my code and please tell me why the hover is not working, thanks!
<style>
#moreDiscussHome:hover{
background-color: #ffffff;
}
</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>
Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.
Try opacity* instead perhaps:
#moreDiscussHome:hover {
opcaity: 0;
}
Note that the element still retains it's space in the layout with this, which may not be what you want... but I'm honestly not sure what you're trying to achieve with this.
Side note: There's no reason not to move those other inline styles to a stylesheet.
This doesn't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: "Shortcuts make for long delays". (In other words, don't do it)
* visibility:hidden will respond to :hover the same as display:none, so it won't work either. Thanks to thirtydot for the tip.