Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I have a practice to do something like this
H&M lookalike. But the typography seem to not look the same, both in or out of the image. This is my full code
https://codesandbox.io/s/sparkling-night-b499r
I have tried this in my css
body {
background-color: #faf9f8;
font-family: "Didact Gothic", sans-serif;
font-weight: bold;
}
.navbar div {
list-style-type: none;
display: flex;
margin: 20px;
opacity: 0.6;
}
.ontop-image {
display: flex;
list-style-type: none;
justify-content: center;
opacity: 0.6;
}
But it doesn't do the job.
So if anyone could tell me why the bold font doesn't look correct, that would be great.
Thanks for reading
This isn't rendering how you think it would be as the font you're loading doesn't have a bold typography style. So its given an automatic bold style, which never really looks that great.
You can see on Google Fonts, the only format they have available is regular:
I suggest you look for a similar font with more formats, for example Nunito looks very similar and has plenty of font weights.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I can't load icons from font awesome in pseudo-element. I tried to follow the docs but it didn't work.
.x::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
}
.x::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
<p class="x">hello, my name is john</p>
Adding the font-awesome stylesheet to your code and it will load the icon.
.x::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
}
.x::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></link>
<p class="x">hello, my name is john</p>
I think you haven't installed fontawesome kit in your html.
please go here and enter your email address. They will send a verification email and then you will be provided to a link where you will find the <script> tag provided by them. copy and paste that in your html file.
ok this problem is really easy to solve:
First thing you have to create a span tag between the tags:
Correction: no need for span tag.
<p class="icon-classname">hello, my name is john</p>
Also another thing you have to remember is to use the link for the font-awesome in your HTML file with this link:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css"></link>
and in the css file:
icon-classname::before {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f007";
}
You do not need span tag to use the font-Awesome, probably the only thing that was missing in your code is the link from font-awesome.
You should probably explore this article
Sometimes the problem is simple ::before vs :before
I recommend that you try using :before. Everything else points out that your code should be working fine.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I use glitch.com and the background color is not changing for some reason I used the same code in other projects and it worked
css:
body {
font-family: helvetica, arial, sans-serif;
margin: 0 auto;
background-color:rgb(40, 48, 54);
}
h1 {
font-style: italic;
color: #373fff;
}
You might be setting the background color somewhere else, if you really want to try and override it without finding it make it !important like this
body {
font-family: helvetica, arial, sans-serif;
margin: 0 auto;
background-color:rgb(40, 48, 54) !important;
}
h1 {
font-style: italic;
color: #373fff;
if you are in glitch.com you have to use this code
.cHtQlM {
background-color: red;
}
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I'm trying to change the hyperlink color, though for some reason it still remains blue and can't seem to figure out why. The rest work, i.e. size, weight etc but the hyperlink color wouldn't change from blue. Please help.
html: Instructions Game
css: a {
font-family: "Raleway", sans-serif
color: #F15B31;
letter-spacing: 1px
font-weight: 600;
font-size: 18px;
You're missing some semicolons ; and a closing curly brace } in your CSS:
a {
font-family: "Raleway", sans-serif;
color: #F15B31;
letter-spacing: 1px font-weight: 600;
font-size: 18px;
}
Instructions Game
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to use beautifull page navigation. When I downloaded below version:
http://codeb.it/resmenu/
I found file index.htm. In that file navigation is white. I tried use css style from orginal page (foundation.css) but this file have the same class like boostrap.
Please help me, I want to use this navigation (http://codeb.it/resmenu/) in black color.
I know, maybe it is easy question but please help me.
Thanks
Have you read all the documentation from the page you provided?
At the end of it, there is a snippet which shows you how to style the navigation bar:
.responsive_menu select {
display: block;
width: 100%;
height: 36px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857;
color: rgb(85, 85, 85);
vertical-align: middle;
background-color: rgb(255, 255, 255); /* This is black */
background-image: none;
border: none;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am seeing this character(see image. just before 0 day left) in a DIV. I even removed all text (using chrome developer tools and it stays there) Any ideas what might be causing this?
I have tried setting different charset but of no use.
It looks like there is supposed to be an icon inside a pseudo-element that isn't showing up.
Either the icon font isn't loading, the "content" code is incorrect or that character does not exist in the font.
.project_sb_date_rem::before {
font-family: 'typicons';
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
width: 1.2em;
height: 1.2em;
font-size: 1.2em;
text-align: center;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
content: '\e036';
}