I am using Flaticon for a website I am developing but there seems to something wrong and I can't find out what.
I downloaded the zip file from flaticon with the option "icon font".
so I uploaded it into the my font's folder but for some reason when I link the css and put an <i class="flaticon-crowd"><i> in my html I get the icon in its default size but when I put font-size:70px; in the css it doesn't get bigger.
I can do color: #f00; and the text turns red so it's not the selector.
Also in the def tools in chrome show that the 70px font-size is used and not overruled.
Does somebody know what it could be that is causing this problem ?
thanks for your time.
Here is an example of the html I use
<!DOCTYPE html>
<html>
<head>
<!-- flaticon -->
<link rel="stylesheet" type="text/css" href="assets/css/flaticon/flaticon.css">
<title></title>
</head>
<body>
<i style="font-size: 70px" class="flaticon flaticon-crowd"></i>
</body>
</html>
Use this class in your css to change the font size.
[class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-size: 150px;
}
Hope it will solve your issue.
A better solution would be:
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-size: 1em;
}
Then the size of the icon can be modified by other classes using font-size
This worked for me:
.flaticon-fast46::before{
font-size: 40px;}
Use the pseudo class :before to modify the icon as you want. You can apply all text properties of css to modify the icons.
.flaticon-crowd:before {
font-size: 17px;
}
Just delete the 'font-size: 20px;' found in the flaticon.css file and then you will be able to set the size you want in your css file.
It's Worked For me. Add :before after the element class which you want to use for icons.
span:before{
font-size: 50px;
}
for sure you could add !important to your css declaration
For example:
font-size:100px !important;
In flaticons.css change the default class into this:
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
font-family: "Flaticon" !important;
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform: none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
the flaticon.css file contains a line that specifies the
font-size: 20px;
this applies over all the flat icons. You may delete that entry to freely edit single icons, or you can respecify a preferred icon size in that same line which will be reflected in all the icons.
Related
I have a Font Awesome Pro license. Most of the icons show up, no problem, as you can see here: https://ruthannereid.com
Specifically, I use the Duotone books icon in my menu (screenshot): https://i.imgur.com/n3xoiDR.jpg
I want that same icon here (screenshot): https://i.imgur.com/8jXfyAQ.jpg
Weirdly, when I add font-family: "Font Awesome 5 Duotone" in the CSS, the icon breaks spectacularly (screenshot): https://i.imgur.com/GUK4yIq.jpg
I would love some help on this. I don't know if I need to do a PHP trick or what, but I'm willing to try any kind of code (hopefully CSS).
P. S. I've tried to add the "fa" and "fad" CSS specifications to the site::before icon manually, but it didn't fix this.
Current CSS:
.error404 .site-inner::before,
.page .site-inner::before,
.single .site-inner::before {
content: "\f5db" !important;
font-family: "Font Awesome 5 Pro" !important;
font-weight: 900 !important;
background: none !important;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-size: 80px;
color: var(--fa-primary-color,inherit);
opacity: 1;
opacity: var(--fa-primary-opacity,1);
}
When using the unicode approach rather than the class name approach there are a few gothchas and I am not sure which way you want to work. If you are using the Font Awesome 5 Pro font rather than the Font Awesome 5 Duotone font you need to make sure you specify the primary and the secondary unicodes. At the moment you are only seeing half the icon because you have only specified the primary layer of the icon.
If you take a look at the books page you will see there is a second unicode of 10f5db which I have highlighted in the screenshot below:
To also display the secondary layer you can add the following :after code alongside your original :before code
.error404 .site-inner::after,
.page .site-inner::after,
.single .site-inner::after{
content: "\10f5db" !important;
font-family: "Font Awesome 5 Pro" !important;
font-weight: 900 !important;
background: none !important;
-webkit-font-smoothing: antialiased;
font-style: normal;
font-variant: normal;
font-size: 80px;
color: var(--fa-primary-color,#fff);
opacity: 1;
opacity: var(--fa-primary-opacity,1);
}
I have not tested this solution because our Pro account does not have SO on the whitelist but am confident it should work. If it does not then please give me a shout and I will test it on one of our whitelisted domains for you.
If you are using the Font Awesome 5 Duotone font then you can specify the --fa-secondary-color as well as the --fa-primary-color.
I'm currently using the Wordpress 'Square' Theme : https://hashthemes.com/wordpress-theme/square/
I looking to modify the font in the navigation menu, drop down menus, and in posts/pages.
I have true type files of my desired fonts, but I'm not sure how I should modify the CSS to achieve what I want.
any help is appreciated!
Thanks,
Mo
You can try to add font family in style.css or custom css file i used this true type script in my theme like this
<script src="https://use.typekit.net/uhs1xwe.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
And in css file i used font like this way
.header_menu ul li {
float: left;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
font-weight: 500;
padding: 0 18px 0 0;
font-family: "sofia-pro";
}
In style.css, write this:
#font-face {
font-family: FontName;
src: url(public_html/your-site/wp-content/themes/your-theme/fonts/FontName-Regular.ttf);
font-weight: normal;
}
Then use
body{font-family: FontName !important;}
see here http://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
https://premium.wpmudev.org/blog/custom-fonts-css/?utm_expid=3606929-109.P6e7JvhjTrWFxwrJZjRkog.0&utm_referrer=https%3A%2F%2Fwww.google.co.in%2F
I have a WordPress site here: http://www.iliveaccountable.com/
That I want to change the first element "iLiveAccountable" to font family to CaviarDreams_Italic.ttf and change the text-transform into "none" so that it will follow the exact text.
I place all my fonts on a folder and added this code on my style.css sheet and tried to play it using the inspect element since I am only targeting the first element in the navigation:
#font-face {
font-family: Caviar Dreams;
src: url(http://www.iliveaccountable.com/wp-content/themes/unicon/fonts/CaviarDreams_Italic.ttf);
font-weight: normal;
}
li#menu-item-15113{
text-transform: none;
font-family: Caviar Dreams;
}
For some reason I can't still change the font family as well as the text-transform. Any idea what I am doing wrong here? I really need to change it.
Try using
#menu-item-15113 a{
text-transform: none;
font-family: Caviar Dreams !important;
}
The "a" tag has its own font which is "Montserrat" thats why you can't change them via "li" tag only.
I'm trying to style the font in an input button as bold.
Here's my code:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
Here's my CSS:
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: bold;
}
All the styles are being applied apart from the bold.
Here's a JSFiddle showing the problem: http://jsfiddle.net/CJg43/1/
UPDATE: Why the close votes? Here's a screenshot of how it looks for me, in Chrome on MacOS:
UPDATE 2: ... and for comparison, here's how it looks with the solution (background-color: white) applied - http://jsfiddle.net/CJg43/23/
Are you using chrome for a MacOS? If so, try adding a background-color to the button to see if it fixes it. The default Aqua styles might be interfering. You can also try -webkit-appearance: none; or -webkit-appearance: button;.
When you use numeric values with the font-weight property and you want to use bold then use the value greater than or equal to 700
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: 700;
}
Js Fiddle Demo
I'm trying to import google fonts, the thing is i follow the steps and actuallyit works if a use
<h3 style="color:white ; font-family:signika; padding:2%"> Whatever </h3>
but what i want to do it's set the Signika font as the default one, so i do
html {
font-family: 'Signika', 'Signika:700' , sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
but it does not wor,i still have to set it in every html tag, i even tried to put it specificly like
h1 {
margin: .67em 0;
font-size: 2em;
font-family:'Signika';
}
but still, not working!
Add this line to your index.html file in the <header>
<link href='http://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
If font-family: signika works inline use that in the css file too.
html {
font-family: signika, sans-serif;
}
The rule 'Signika:700' would not do anything, what I think you're trying to do should be written as:
font-family: signika;
font-weight: 700;
I figured out i was putting the rule font-family in h1 but that was not the only instance of h1, therefor i had to look further and i found the respective h1 sentence to use the font-family, so it was missplaced after all, thank you for you help, was very useful!