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
Related
When I first use CSS, I thought it is impossible to get the properties of an element. However, I found this code Here, it shows that I can get the properties of elements by using CSS.
For example, if I want to get the title of <abbr> element, I can just use this code:
abbr::before{
content:attr(title);
color:red
}
<abbr title="the title">
Content Test
</abbr>
attr(title) give me the title of <abbr>
In that case, I want to ask if there is a way to get the content of the element.
For example, I want to get Content Test in the code in my example by just using CSS.
How could I finish that?
I didn't fully understand the question. Why get the content of ? change style or change the content?
You can define content through CSS rather than through HTML. Maybe this will help you:
abbr::after{
content: 'Content Test';
color:red
}
<abbr title="the title">
</abbr>
I have a similar question as this thread, but the answer doesn't seem to be listed anymore. I have a list of tiles that show a property image and some relevant information. I'd like each to be a full link to another page with more information on the property.
I've made my tiles into a directive, and currently the html content of that directive is wrapped in an anchor tag. Which works to reach my specified link, however that anchor tag only matches the height of the mdGridTileFooter.
Is there a way to make the entire tile clickable? So that the user can click on any part of it and access the intended link (not just the bottom footer?
The HTML Directive:
<a ng-click="spVm.linkToProperty(proforma)" ng-href="{{spVm.path}}">
<div>
<md-grid-tile-footer class="saved-prop-address">
<div class="saved-prop-address-title" ng-bind="spVm.city"></div>
<div class="saved-prop-address-subtitle"
ng-bind="proforma.listing.update_date | date: 'MMMM dd'"></div>
</md-grid-tile-footer>
</div>
</a>
The HTML Page with the Tile List:
<md-grid-list md-cols-xs="2"
md-cols-sm="3" md-cols-md="3" md-cols-gt-md="6"
md-row-height="1:1" md-gutter="4px">
<md-grid-tile class="saved-prop"
ng-repeat="proforma in sdVm.pageGroups[sdVm.saved.idx]"
ng-click="sdVm.showSelectedProperty(proforma); sdVm.linkToProperty(proforma)"
ng-href="{{sdVm.path}}"
ng-style="{'background-image':'url({{proforma.thumbnail_url}})'}">
<pgo-saved-property proforma="proforma">
</pgo-saved-property>
</md-grid-tile>
</md-grid-list>
Thank you!
Since it looks like the directive had no height, adding any responsive height/width styling to the anchor tag won't work.
Adding this code to the css for the directive, and the anchor tag, will bring the anchor/link to the full height and width of the tile.
style="display:block;height:100%;width:100%;"
And any responsive changes that occur with the tiles will work with this code as well.
I'm attempting to display a mailto link. Is that possible with CSS?
html
<li class="fe footer_no_link"></li>
css
.footer_column .fe:after {content:"info#site.com"; }
you cannot add html elements with the CSS3 ::after or ::before selectors. The content:"" property will only accept plain text.
You must remember that CSS is for styling purposes only. This includes the ::before and ::after selectors.
Your best option is to use a JavaScript alternative.
Your value wasn't appearing because the speech marks needed escaping, or changing:
.fe:after {content:"<a href='mailto:info#site.com'>info#site.com</a>"; }
http://jsfiddle.net/Cb2ry/
Even then though, your content will just display as static text, rather than rendered.
Content added with the pseudo-element doesn't appear in the DOM, so no you can't.
But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file.
If the goal is to block spam, I usually use this piece of javascript:
var m;
m='in';
m+='f';
m+='o#exa';
m+='mpl';
m+='e.co';
m+='m';
$ele = document.getElementById('contact-mail');
$ele.href = 'mailto:'+m;
$ele.innerHTML = m;
The mail is splitted to be sure that it doesn't appear as an email in any file.
You can see the result here: http://jsfiddle.net/tzkDt/
This might be useful to someone...
Instead of inserting the link with the css, I coded it into the html with an href & class, but left it empty. Like this:
<p>This text is always here.</p>
<a class="mobile" href="mailto:info#site.com"></a>
.mobile:after {
content:'Click here to email us.'
}
That way the link doesn't appear (height:0, width:0) until it has content.
I used it for a responsive store locator where the map was stacked on top of the location list at small screen sizes, necessitating a link to the list anchor. I considered it a "design" decision, which is the only justifiable reason to do it.
You can't add html to the content in css. Unless you escape everything.
http://jsfiddle.net/PDTng/
Alternatively, you could use jQuery and use .html(), eg:
http://jsfiddle.net/PDTng/1/
I've made this html box, that is supposed to have a title and some buttons on right,
http://jsfiddle.net/vqpmt/17/
Everything seems fine except that the edit button as you can see is a little bit below the title, that shouldn't be the case they should both be at the same exact level.
How do I achieve that, and is my code a mess? Is there a better way of doing something like this?
I moved h1 and the edit link tag inside a div container. Check my version of your code here
To be on the exact same level, the html elements has to be either inside a container (as in my fiddle) or should use 2 inline html elements.
Try reading w3schools on html and css which has lot of information that you can learn in short time.
w3schools HTML reference here
w3schools CSS reference here
Edit: h1 is a block element which means it will add a new line. So I added a new css style .inline and changed the block property to inline.
.inline { display: inline }
Your H1 element extends the width of the page and is pushing your edit link down. I've provided an alternative solution here.
Fiddle: http://jsfiddle.net/GvGoldmedal/vqpmt/32/
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.