I try to make my header like this wordpress this: https://boardwalkdemo.wordpress.com/
But something isn't right. My toggle button :before code is not show properly.
I can see my progress live at http://detelin-markov.blogspot.com/
Where is my mistake?
In your .sidebar-toggle::before you should add the font-family which is FontAweSome and your content is not recognized by the font.
Here is an example:
.sidebar-toggle::before {
content: "\f039";
height: 24px;
width: 16px;
color: inherit;
font-size: 16px;
line-height: 24px;
font-family: 'FontAweSome';
}
Related
Not sure if this is a stupid question or not.
Is there any way to overwrite text in HTML/CSS with a different text?
An example of what I mean
I want to make it obvious it's a terrible reskin of a previous website.
I know I could do it with an image, but I'd like to have it as regular text. Is it something you'd have to do with custom fonts? Or is it even possible?
This is a very basic example to achieve this.
The content that you really want to display is in the :after of the span that surrounds the year.
body {
background: #000;
}
h1 {
color: #fff;
font-family: sans-serif;
}
.year {
position: relative;
}
.year:after {
position: absolute;
top: .1rem;
left: 0;
display: block;
content: '2021';
transform: rotate(-10deg);
color: red;
font-family: 'Comic Sans MS';
}
<h1>Happy <span class="year">2020</span> anniversary!</h1>
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.
You can use another pseudo element:
div:before {
content: "\f073" ;
font-family: "FontAwesome", sans-serif;
padding: 20px;
color: black;
font-size:2em;
}
div:after
{
content:attr(data-date);
display:block;
border-top:1px solid black;
}
I have a button class working like this :
<p class="button">Rejoindre</p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
You can put the link tag on the outside to make anything inside it be contained in the link:
<p class="button">Rejoindre</p>
However, you probably want to use something other than a p tag for your button, maybe a button element instead?
More info on HTML buttons.
Add display: block to the .button a ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
You can add display:block; to you anchor tag.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p tag all together.
I wanted to change the title link color in the facebook likebox. I've tried doing this with regular css but to no avail as the content and styles are being loaded from external sources into an iframe it seems.
These are the selectors in question:
.fan_box .connect_action .name { line-height: 15px; font-size: 14px; font-weight: bold; }
a { cursor: pointer; color: #3B5998; }
So either I need to change the color in .name or a to yellow. I tried the following and it did not work:
.fan_box .connect_action .name { line-height: 15px; font-size: 14px; font-weight: bold; color:#F90 !important; }
a { cursor: pointer; color: #F90 !important; }
I'm afraid you cannot control the presentation of the contents of an iframe from the parent document. It's a completely different HTML document, so your CSS files will have no effect on it.
I have code like so
<li class="iconic camera">Pentax K-5 16 Megapixel DSLR</li>
I use CSS like
.iconic.camera:before {
font-size: 35px;
font-family: "KameraDings";
content: "A";
padding-right: 8px;
vertical-align: -10%;
}
to insert a Camera symbol with the special symbol font. However I have style for li's set to italic. Is there a way possible to remove italic from this one content letter ? I have tried font-style: none; to no avail
That's font-style: normal; not font-style: none;.
jsBin demo
.iconic{
font-style:italic;
}
.iconic.camera:before {
font-size: 35px;
font-family: "KameraDings";
content: "A";
padding-right: 8px;
vertical-align: -10%;
font-style:normal; /* ta-da!*/
}