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;
Related
I am displaying some code blocks in my NextJS project. A normal HTML file outside the Tailwind project displays each <span> item on a new line, but Tailwind CSS displays them on the same line without any breaks.
I want each of these <span> items on a new line in my code because they are easy to read, and the design looks better. However, I don't want to change their class names because there are many HTML files, and there would be a lot of repeating work for me.
Tailwind resets everything. I want to change the Tailwind styles to default ones. Is there any way to achieve this?
<div="container mx-auto">
<div class="bash">
<pre>
<code>
<span>$ ls</span>
<span>cat /etc/passwd</span>
</code>
</pre>
</div>
</div>
A span tag is an inline level element, so it is expected behaviour for spans to be inline with each other.
I you want to make all your spans display on their own line (block level) then target the span tag and set it to display: block
span {
display: block;
}
Your HTML is incorrect, it should be.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css">
<div class="container mx-auto">
<div class="bash">
<pre>
<code>
<span>$ ls</span>
<span>cat /etc/passwd</span>
</code>
</pre>
</div>
</div>
As someone pointed out, spans are inline objects by default so a "normal" HTML page wouldn't display spans on their own line unless one of its ancestors is forcing it or CSS for the spans are changing it up. Remember the rules when it comes to hierarchy as well, more specific takes precedence and so on so keep it in mind.
I'm trying to make my site more accessible for disabled users, and I've been researching how to add alternative text to icons. I'm using Font Awesome icons and the icons are acting as a link, and the docs suggested I add a title link to the anchor tag around it like so:
<a href="path/to/shopping/cart" title="View 3 items in your shopping cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
However, it doesn't seem to work with the Apple's VoiceOver. It's still just reading out "Visiting Link [?]". Does anyone have any experience with this?
Thanks!
You have to use the title attribute conjointly with the aria-label attribute.
The title attribute is not always read by assisting technologies but the aria-label should be.
Unfortunately using the aria-label alone won't be of any help to people not using a screen reader and the title attribute will give them a clue.
There are two ways you can add some content in here.
The first is to use an img element with an appropriate alt attribute value, e.g.
<a href="path/to/shopping/cart" >
<img src="url/source.jpg" alt="View 3 items in your shopping card" />
</a>
A second method would be to add some text into the i element and visibly hiding it:
<a href="path/to/shopping/cart">
<i class="fa fa-shopping-cart" aria-hidden="true">
<span class="sr-only">
View 3 items in your shopping cart
</span>
</i>
</a>
Add the .sr-only class to your stylesheet:
.sr-only {
height: 1px;
width: 1px;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
position: absolute;
}
This second method will allow for longer strings of text, if needed. It also prevents a quirk on some browsers (Firefox, from memory) where if text is aligned off-screen and is part of a link, a user tabbing to the link sees focus extended to where the text is, which leads to a very long, thin box on screen.
.sr-only works by making the content a small 1px box that's then clipped out, and for robustness is positioned absolutely on the page. It's supported by all modern browsers and only needs one extra clip rule for older versions of IE that don't like the standard syntax (clip: rect(1px 1px 1px 1px)). More information can be found on Yahoo's developer blog.
As for which to go for it's a matter of personal preference. I would go for the .sr-only to add meaningful text to the page if using an icon set. If you want to use the img element you need to make sure that when the content's updated the content author writes something meaningful rather than describing what the image looks like.
If the icon is content (which is must be if it is conveying information and you don't have other text already conveying that information) then the element to use to represent it is not the italic element, but the <img> element, which supports the alt attribute.
Using the aria-label attribute is likely what you are looking for.
<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
I'd also recommend these 2 articles for further understanding why the title attribute is widely misunderstood and why it isn't behaving the way you're led to believe it will.
http://mrwweb.com/the-title-attribute-and-why-its-almost-useless/
https://devbook.com/title-attribute-truth/
I have downloaded a site with a site downloader, which had nice icons on it. But after downloading it, that icons went away and I cannot see any image file.
In html, it's like this.
<li class="active">
<a href="buttons.html">
<i class="icon-up"></i> Buttons
</a>
</li>
the class looks like below.
.icon-up:before {content: "\f0a6"; }
What is the meaning of that class definition's
:before
content
and
"\f0a6"
Google really helps.
content denotes a real content that's put inside a css element. So, p:before {content: 'hello'} would put a string hello in front of the paragraph content. See here: http://jsfiddle.net/gRjRe/
The content you shown ("\f0a6") is just a Unicode value for a font character. See how they are used here, for example: http://astronautweb.co/snippet/font-awesome/
It outputs the character with Unicode value f0a6 (61606) before any element with class icon-up. As Shomz pointed out via this link, it's a hand pointing upward in this context.
.icon-up:before {content: "\f0a6"; }
Explanation:
:before is before each matched/found .icon-up element
content is the content to introduce before each .icon-up element, in your case, it is a Unicode value f0a6 (61606), which generated by Font Awesome as a vector icon:
Definition:
The :before selector inserts content before the content of the selected element(s).
The content property is used with the :before and :after pseudo-elements, to insert generated content.
tag:before{content:value}
means put the value of content before the tag
and "\f0a6" means hand up icon
in your case a handup icon will shown before the list Buttons
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
Especially each image that contains the text and icon are displayed using background-image in CSS (using CSS Sprites), so there is no even alt or title if the image
had been shown using <img>. So, pure image in this case. How can actual text be added (or using some other mechanism) for search engines to better index these tabs?
You'd use an 'image replacement technique':
http://www.mezzoblue.com/tests/revised-image-replacement/
Just use actual relevant text in each element and use text-indent:-9999em; to shift it offscreen. This may involve extra styling such as display:block on the element if it's normally inline for text-indent to work but you'll end up with basic a CSS image replacement implementation.
You should absolutely be using text somewhere, at least an alt tag.
Try a something like <span>Text</span> with text-indent:-9999px;, or any of the other variations of css text hiding/masking.
There may be some merit to adding the title attribute to those tabs as well.
If you use a <span> and set its display to none via CSS, then you can put whatever text in there you like for SEO.
This is done on i.e. <h3> tags on the css Zen garden. A number of them use this construct:
<h3>
<span>The Road to Enlightenment</span>
</h3>
...where you then give the <h3> a CSS background-image and set the <span>'s display to none. You should be able to use the same type of idea for tabs that use images.