In frontend, some icons are not working : fontawsome icons and also the icons in the admin bar but only in frontend. In backend, I can see all the icons.
In custom css I found this :
#import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
body { color:#4c5166;
font-weight:400;
}
* { font-family: 'Montserrat', sans-serif !important;
}
and also :
.flex-direction-nav a {
font-family:icomoon !important;
}
.flex-direction-nav a {
font-family:icomoon !important;
}
Hello I've been through this before.. i solved by removing the '*' from the style like
*{
font-family: 'Montserrat', sans-serif !important;
}
Do it like this instead
body,html {
font-family: 'Montserrat', sans-serif !important;
}
NB: if you do it the first way you're practically saying all the all in tags,classes and id should take the Montserrat font which is not applicable to fontAwesome icon or any other icon
Related
When I am using -webkit-text-outline property there are weird artifacts that shows up on the outline. How can I fix it. I have seen that on genius.com there are no artifacts, and they are also using -webkit-text-outline (example https://genius.com/a/ken-carson-feels-betrayed-on-new-song-the-end), so this is not a problem with a webbrowser, but something in my code must work wrong.
Website: https://dnidomaturypl.netlify.app
Source Code: https://github.com/mbledkowski/dnidomatury
-it's totaly related to font design, we cannot change it different font brhaves differently whith -webkit-text-outline property.
It's because how the font were build.
.Poppins {
font-family: 'Poppins', sans-serif;
}
.Poppins {
font-family: 'Jost', sans-serif;
}
.roboto {
font-family: 'Roboto', sans-serif;
}
h1 {
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
}
<h1 class="Poppins">Poppins</h1>
<h1 class="Poppins">Jost</h1>
<h1 class="roboto">Roboto</h1>
I am trying to use a google font but after importing and changing font family, it only changes the font to the default cursive font. When I remove the 'font-family' the text reverts, so it's obviously affecting the correct section of my code.
This is the font I am looking at https://fonts.google.com/?preview.text=Weather-App&preview.text_type=custom&selection.family=Concert+One&vfonly=true&query=cinz.
#import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap");
.title {
font-size: 40px;
font-family: 'Cinzel', serif;
}
It seems for me that you forgot to add the class to your html tag .
I tried your css out and it works perfectly
example
#import url("https://fonts.googleapis.com/css2?family=Cinzel&display=swap");
.title {
font-size: 40px;
font-family: 'Cinzel', serif;
}
<p class="title"> Hello world!!</p>
I'm using a popular posts widget on blogger and I can't get the font to change. Im using a custom font I have everywhere else on my blog. I used this css as a temporary solution
.sidebar h2.title, .sidebar h2 {
display: none;
}
this gets rid of the title, but now I'd like the title back and using:
.sidebar h2.title, .sidebar h2 {
font-family: raleway;
}
doesn't work. I've also tried with the widget Id and some other variations..
.popularposts1 {
font-family: raleway
}
Some help would be greatly appreciated :)
Edit *
I've also tried
.popularposts .widget-title {
font-family: 'Raleway', sans-serif;
}
I'm sure it's something along these lines but i just can't figure out where I'm going wrong
You need to import the font (if you haven't) and also use quotes around the font-family declaration.
#import url(https://fonts.googleapis.com/css?family=Raleway);
.your-class {
font-family: 'Raleway', sans-serif;
}
<div class="your-class">
This is in a different font.
</div>
I am trying to modify some website code that I have got from a template. In the css file i have a number of lines of code which look as follows - and i assume these are the logos to be referenced;
/*********************************************************************************/
/* Icons */
/* Powered by Font Awesome by Dave Gandy | http://fontawesome.io */
/* Licensed under the SIL OFL 1.1 (font), MIT (CSS) */
/*********************************************************************************/
.fa {
text-decoration: none;
}
.fa.solo {
}
.fa.solo span {
display: none;
}
.fa:before {
display:inline-block;
font-family: FontAwesome;
font-size: 1.25em;
text-decoration: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.fa-lg{font-size:1.3333333333333333em;line-height:.75em;vertical-align:-15%}
.fa-2x{font-size:2em}
.fa-3x{font-size:3em}
.fa-4x{font-size:4em}
.fa-5x{font-size:5em}
.fa-apple:before{content:"\f179"}
.fa-windows:before{content:"\f17a"}
.fa-android:before{content:"\f17b"}
.fa-linux:before{content:"\f17c"}
.fa-dribbble:before{content:"\f17d"}
.fa-skype:before{content:"\f17e"}
.fa-foursquare:before{content:"\f180"}
.fa-trello:before{content:"\f181"}
.fa-female:before{content:"\f182"}
.fa-male:before{content:"\f183"}
.fa-gittip:before{content:"\f184"}
.fa-sun-o:before{content:"\f185"}
.fa-moon-o:before{content:"\f186"}
.fa-archive:before{content:"\f187"}
.fa-bug:before{content:"\f188"}
The issue i am having is that the logos do not appear on the webpage. Does the slash indicate that in the current directory there should be image f181,f182 and so on or do these values represent something else.
Thanks for your help.
I got the answer. These codes are from font awesome family. Down load the font awesome and link to your webpage. It will work for you.
Download Font Awesome
I am trying to incorporate CSS before content.
I want to put info icon (i), which is "\e608"
#securityCodeLink:before {
content: "\e608";
}
The output looks like this
But if i try with 2701 or something like that
#securityCodeLink:before {
content: "\2701";
}
It works perfectly fine.
Can any one tell me why is this and how can i fix this?
The icon will only appear if you're using a font which supports it.
On StackOverflow (which uses a font-family of Arial, 'Liberation Sans', 'DejaVu Sans'):
\e608 renders as ๎
\2701 renders as เช
I researched a lot about this and finally it get Solved..
The icon will only appear if you're using Specific Font which supports it.
In CSS we need to define the font as below.
#font-face{
font-famiy:'nameOfFont';
src: url(data:application/font-woff;charset=utf-8;base64______format("woff");
}
.requiredFont input[type=radio]{
font-family: nameOfFont;
display: inline-block;
text-decoration: inherit;
}
.requiredFont input[type=radio]{
content: "\E608";
}
.requiredFont input[type=radio]:checked {
content: "\E609";
color: reqired HEX Color;
}
Most Probably It will work...when we design the font for the content in radio button we want..