I am inserting a FontAwesome icon along with some text from the data attribute in a div pseudo element:
<div data-date="Mar 01, 2016"></div>
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
}
https://jsfiddle.net/cn0vhns9/
Now what I want is to increase the size of the icon and put the text right under it with some margin. While putting the text content under the icon seems achievable (if I fix the width of the pseudo element), I can't think of the way to increase the size of the icon without increasing the size of the text content as well. Any ideas?
It is possible even in your case. Please, see the updated fiddle at https://jsfiddle.net/cn0vhns9/3/. You will have to style the icon as a pseudo-element (::first-letter, or alternatively :first-letter with just a single semicolon for compatibility reasons).
My answer only demonstartes the problem with different font-size.
CSS
div:before {
content: "\f073" attr(data-date);
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size: 20px;
}
div::first-letter {
font-size: 40px;
font-family: "FontAwesome", sans-serif;
}
HTML
<div data-date="Mar 01, 2016">
</div>
However, I consider this solution to be a bit hacky. Most likely I would separate the icon and the date and place each of them into a separate HTML tag if possible.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments