I'm using FontAwesome 3.1.0, and this simple code doesn't work as one would normally expect:
<a href="/">
<!-- other html content -->
<i class="icon-spinner icon-spin"></i>
</a>
Simply changing the a tag to div makes it work.
How to make the CSS3 animation work? Or is this not possible? I would rather not change it to div and make a link-like behavious via JS.
UPDATE:
The code above actually works, like on jsfiddle. It doesn't work on my page, though. There must be some underlying conflict that I can't figure out.
Example: http://www.iroquote.com/games/Udws8uZWCgAH6vfM/gta-5-gameplay-video-released
Try editing a.post-agree-amount:first where there is a <i class="icon-thumbs-up"></i>. When I change that to <i class="icon-spinner icon-spin"></i>, it doesn't animate. If you move this <a> around the DOM with the browser code inspector, it still doesn't animate. But once I change <a> to <div>, it animates.
I'm using Google Chrome 28.0, but also saw this behaviour in Firefox 22.0.
Found the problem and the solution.
CSS3 animations apparently don't work with display: inline elements, and Bootstrap's css had a rule that made <i> icon elements have display: inline. Except for <i> icon elements inside a.btn, Bootstrap's css had a rule to apply display: inline-block to them.
So all we need to do is apply display: inline-block to those i.icon-spinner.icon-spin inside the links.
(Thanks Praveen for useful comments)
Your code works, fiddle. But you should have the icons tag <i> outside the anchor tag, otherwise it will be hyper linked.
Change your like this
<i class="icon-spinner icon-spin"></i>
Google
Working Fiddle
Related
I'm having trouble getting a span (or i) that I'm having represent a particular icon using FontAwesome styles to be the color I want it to be.
The weird thing is that the Chrome inspector shows it to "be" the color the CSS says it should be, and it shows that the rule is correctly implemented, but in the browser it appears as the color of the surrounding div, which, again, Chrome inspector shows to be correctly overridden.
Fontawesome works fine, using CSS styling to set color, in other parts of my app.
Has anyone run into any quirks with fontawesome and CSS styles? Under what circumstances would Chrome inspector show the font as one color but it would display as another?
If you can help, would appreciate. If not, that's fine, but don't down-vote me, if you would.
Assuming I understand your problem, you don't have any text in the <span>.
But even if you add some, you're hiding the parent element by calling:
#la-tarifa-es{
display: none
}
So all of the children will be hidden as well regardless of how you target them.
The answer was that FontAwesome works by adding a ::before to the SPAN (or I). So, apparently, the CSS rule for the containing DIV was operating on that, not the CSS rule for the SPAN. When I made a very specific rule for SPAN::BEFORE it worked.
I'am making my first site but my css style for links wont work can anybody help my please.
my code you can find out here: http://pastebin.com/eM8FzrWH
Your style is working fine. You are removing the text decoration of a links, then re-adding the underline by wrapping the text in the links with
<u>Something</u>
Your are used tag (which is for underline) within the tag.
Remove tag for your link tag. Now your css working fine.
I'm a server-end python programmer, and have very few knowledge about css.
Recently I was using gitbook to write our doc-sites.
Everything was OK, except when I'm using anchors in the md files.
The content wrapped in the anchor tag will be show in blue. Which isn't good.
I wanna disable this blue color rendering, then I did some search and find the page was influenced by a file named style.css.
There is only 1 extremely long line in this file. I searched blue in it, nothing.
And then I searched anchor in it. I got:
fa-anchor:before{content:"\f13d"}.
.anchor{position:absolute;top:0;bottom:0;left:0;display:block;padding-right:6px;padding-left:30px;margin-left:-30px}
.anchor:focus{outline:0}
Is this fa-anchor:before{content:"\f13d"}. thing which influenced the anchored content rendering? How to disable its effect?
If it isn't, what key-word should I searching in the css file for anchored contnet rendering?
PS: In this question the anchor means syntaxs in html like <a href='#stash_save'> save </a>
#Zen fa-anchor:before{content:"\f13d"} this code means the generated icon using unicode character won't be part of DOM.
By default when <a>element apply by default color turns into blue color you have to find the class if any applied on <a> tag. otherwise you can change the color using <a href="#" style="color:#535353">. using inline CSS here just for reference.
You can make a specific class for <a> tag.
Hope it solve your problem. check the DEMO also.
add color: red;
to the end of
.anchor{position:absolute;top:0;bottom:0;left:0;display:block;padding-right:6px;padding-left:30px;margin-left:-30px}
and see if it modifies the color.
How can I hide text value and just show icon at all using Font Awesome 3.2.1? The menu option needs to have a value. Here is what I have:
Facebook
I tried text-indent but simply hidden the logo and not the text which was weird.
<i class="fa fa-facebook"></i> <span style="display:none;">Facebook</span>
This is the standard use of FontAwesome icons, that should solve your issue.
In a similar way to Glyphicons (as used in Bootstrap), you can use a span element within the a tag:
<span class="icon icon-facebook-sign"></span>
As advised, I have included the title attribute for screen readers. A screen reader should use this, as long as the a tag doesn't contain any text.
<span class="hidden-xs">Facebook</span>
If you use Bootstrap here, you can use hidden-lg, hidden-md classes.
You can use color:transparent property which is very useful.
Text-indent should also work. CSS property value to display: inline-block or display: block to anchor.
One more solution is that you can put text in span tag and give span display:none;
I am making an HTML5 video player, but I need to put a play icon on my button and the old method no longer works. Also, I cannot use background-image:url('Filename'); because I also have a gradient, and when I add the background-image it overrides my gradient. Any suggestions?
you can do what twitter bootstrap does and use an <i class="some-icon-class"></i> in the content to easily add icons.
the CSS for that <i> tag is set to a block with a certain height and width, and has a background image.
they use it like this:
<button ...><i class="plus-icon"></i> Add New Item</button>
check it out: http://getbootstrap.com/2.3.2/base-css.html#icons
You have not specified what your button element tag is exactly. But since you say "html5" I will assume you are using the actual "button" tag. Maybe try this:
<button onClick="eventHandler();"><img src="button_image.png" /></button>
Or perhaps you are looking for "more proper" html5 where img tag is not used and all styling is strictly in the CSS?