Is there any way to make this icon look thinner? font-weight and stroke-width is not working.
.material-icons-outlined,
.material-icons.material-icons--outlined {
font-family: 'Material Icons Outlined';
font-size: 60px;
font-weight:100;
stroke-width: 0.1px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons material-icons--outlined">assignment</i>
</section>
</body>
</html>
it is not possible to change the font weight. is icon pattern. you change the font size, reduce the icon size.. what the icon looks like with a smaller border
You can use scale() OR scale(). (added two links just for reference)
The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).
Syntax
The scale() function is specified with either one or two values,
which represent the amount of scaling to be applied in each direction.
scale(sx)
scale(sx, sy)
.material-icons-outlined,
.material-icons.material-icons--outlined {
font-family: 'Material Icons Outlined';
font-size: 60px;
font-weight:100;
}
.icons_scale{
transform: scale(0.5);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>
<body>
<section id="outlined">
<h2>Outlined</h2>
<i class="material-icons material-icons--outlined icons_scale">assignment</i>
</section>
</body>
</html>
UPDATE:
Actually, the stroke-width property is used to set the thickness of a line, text, or outline of an element inside the SVG tag. In this case, changing the font size will fix it.
I think material-icons stroke width cannnot be modified. But instead we can use "material symbols", which can be modified.
Related
The font size changes when I add the Boostrap CDN link.
I found that this is because Boostrap has a default font size. I tried to change the font size by specifying the font size in the external style sheet and putting !import, but it doesn't work. And it only works when I put font size in the inline style sheet.
div.banner {
font-size: 500% !important;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"></script>
<main>
<div class="banner">
<h1 class="slideUp" style="font-family: 'EB Garamond', serif">
Yasuní National Park<br />
<span style="font-size: 40%"> between oil exploitation and conservation</span>
</h1>
</div>
</main>
This is the part of my code and I was trying to change the font size of <h1> tag by applying the code below. But it doesn't work. Can you explain why?
div.banner {
font-size: 500% !important;
}
Firstly, we change the size of font sizes using em, rem, and px.
Given CSS:
Let us say you have you font size declared for your entire document like this
* {
font-size: 20px;
}
that is in pixel.
If we want to change this part of your code.
<span style="font-size: 40%;"> between oil exploitation and conservation</span></h1>
We use rem mostly. like:
<span style="font-size: 2rem;"> between oil exploitation and conservation</span></h1>
//2rem means -> default 20px(declared) * 2 = 40px will be the font-size of 2rem, 3 rem is 60, etc.
I see you tagged specificity too..
Not a good practice to use important even in testing.
Highest priority is inline styling -> then IDs -> classes.
On my web page I have a popup image in a series of nested divs. At the top div I have a title. While the higher resolution of this image is loading, I display an emoji hourglass (⏳) in the title. When completed, I remove the hourglass. When the hourglass is removed, the div with the title text in it gets a little smaller, vertically. How can I have the emoji equal to the size of the text so that it does not make my div any taller?
Here is a code snippet that shows a div with a cyan background color and an emoji. When the button is clicked, the innerHTML is replaced with text without emoji and you can see the vertical size get smaller.
document.getElementById("button").onclick =
() => {document.getElementById("div").innerHTML = "This is some text without emoji"};
div.textWithEmoji {
font-size : medium;
background-color : cyan;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emoji Size Test</title>
</head>
<body>
<h1>Emoji Size Test</h1>
<div class="textWithEmoji" id="div">
This is some text with emoji ⏳
</div>
<br>
<button id="button" type="button">Remove Emoji</button>
</body>
</html>
I don't want to force the div height to a specific value as the font-size is a variable in my page.
I have tried setting the size of the emoji to 75% and that works on Chrome and iOS but there is no guarantee that that will work on every platform.
Any ideas how I can get this to do what I want?
Thanks,
Mike
Set a line-height to your div:
$("#button").click(function() {
$('.textWithEmoji').html("This is some text without emoji")
});
div.textWithEmoji {
font-size: medium;
background-color: cyan;
line-height: 1.2em;
margin: 5px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Emoji Size Test</h1>
<div class="textWithEmoji" style="font-size:10px;">
This is some text with emoji ⏳
</div>
<div class="textWithEmoji">
This is some text with emoji ⏳
</div>
<div class="textWithEmoji" style="font-size:20px;">
This is some text with emoji ⏳
</div>
<div class="textWithEmoji" style="font-size:30px;">
This is some text with emoji ⏳
</div>
<button id="button" type="button">Remove Emoji</button>
Try putting the icon inside a <span> element that holds the emoji. Like:
<p>This is some text with emoji <span class="emoji">⏳</span> </p>
Then try to give the <span> element some CSS to make it with the same size of the text. Of course this solution is hardcoded. Something like:
.emoji {
font-size: 1vw; // vw, vh, em, rem, px or %
// OR
transform: scale(1.25);
}
You can wrap it in a span, give it a class, and reduce the font-size:
document.getElementById("button").onclick =
() => {document.getElementById("div").innerHTML = "This is some text without emoji"};
div.textWithEmoji {
font-size : medium;
background-color : cyan;
}
.icon {
font-size: 75%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emoji Size Test</title>
</head>
<body>
<h1>Emoji Size Test</h1>
<div class="textWithEmoji" id="div">
This is some text with emoji <span class="icon">⏳</span>
</div>
<br>
<button id="button" type="button">Remove Emoji</button>
</body>
</html>
You can put it in span and give font-size
document.getElementById("button").onclick =
() => {document.getElementById("div").innerHTML = "This is some text without emoji"};
div.textWithEmoji {
font-size : medium;
background-color : cyan;
}
span { font-size: 12px;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emoji Size Test</title>
</head>
<body>
<h1>Emoji Size Test</h1>
<div class="textWithEmoji" id="div">
This is some text with emoji <span>⏳</span>
</div>
<br>
<button id="button" type="button">Remove Emoji</button>
</body>
</html>
I'm working to reproduce a design I found, the design shows a text arrow like so:
Any idea how to make that arrow? The obvious > looks wrong:
It looks like your designer used chevron-right from Font Awesome. You can install it by adding a stylesheet from the Font Awesome CDN like I've done below or through any of the other setup options. Then, you can reference the icon on the page by copying the icon code that the Font Awesome documentation supplies you with.
Here's a demo where I've tried to recreate your image:
:root {
background-color: #22272A;
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #BCBDBD;
}
.fa-chevron-right {
margin-left: 6px;
}
HIKING <span class="fas fa-chevron-right"></span>
<!-- External Libraries -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
In production code, you may want to choose a different installation method for performance considerations that takes into account your page's needs - for example, choosing to import SVGs with JavaScript if you don't have a very large number of icons to display.
Try http://fontawesome.io
They have lots of icons - Search for 'fa-angle-right ' on this page: http://fontawesome.io/cheatsheet
Otherwise, you can use a png or an svg.
<!DOCTYPE html>
<html>
<style>
body {
font-size: 20px;
}
</style>
<body>
<p>I will display ❯</p>
<p>I will display ❯</p>
</body>
</html>
I am using iCheck to style my check- and radio boxes. I want to make the background of the radio box white. Currently its transparent and looks like this:
I thought it might be a good idea to edit the blue.png image
and to change the background from transparent to white. But now, the radio box is not smooth round anymore. This is how it looks now:
Is there any simpler/ better way to change the background to white? Do I really need to edit the blue.png?
Here is the code to produce the picture:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="/resources/vendor/icheck-1.x/skins/square/blue.css">
<style>
span{
margin-left: 10px;
color:#FFF;
}
label{
background-color: #08C;
border-radius:20px;
padding: 20px;
display: inline-block;
}
</style>
</head>
<body>
<label for='name' >
<input type="radio" name='name' id='name'><span>Select this name</span>
</label>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/resources/vendor/jQUery/jquery-1.11.2.min.js"><\/script>')</script>
<script src='/resources/vendor/icheck-1.x/icheck.js'></script>
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-white',
increaseArea: '20%', // optional
});
});
</script>
</html>
Edit Here is the modified blue.png
You can download the uncompressed image here.
The simplest to change the style of those checkbox graphics than changing those images. It may be possible to achieve a similar effect in CSS using radial-gradient or border-radius following the selectors in blue.css to produce a circle, but you are better off editing the graphic of the theme itself.
Your image doesn't look smooth because you filled in the background in such a way that removes antialiasing.
Here's blue.png and blue#2x.png with the background filled in as you have done, preserving antialiasing, using GIMP.
Note that your style is hard to see over a white background.
There is simpler than changing the png for sure.
I added a background-color to the color I wanted in .icheckbox_square-xxx, .iradio_square-xxx by adding the following in my own css file.
.icheckbox_square-grey, .iradio_square-grey {
background-color: white;
}
i'm switching some pages over to HTML5 which contains headlines that need to be set with a really small line height. Now since <!DOCTYPE html> any line-height below the font-size is ignored. I can space them out all I want, but no chance bringing them closer together.
Anyone know why that is and if it's cureable?
Thanks,
thomas
Edit: Found it. My old markup was <a style="line-height:12px;" href="#">something</a> which worked in XHTML 1.0 transitional but not in HTML5.
I changed it to <div style="line-height:12px;">something an that works!
Thanks!
Your <a> tag is an inline element and it appears in HTML5 inline elements defer to its parent 'block' element's line-height ( or all the way up to the <body> style if that is the immediate parent ).
Example:
body { line-height:20px; }
a { line-height:12px; }
and this markup:
<body>
test
</body>
The <a> tag will have a line-height of 20px not 12px.
So your 'inline' <a style="line-height:12px;" href="#">something</a> didn't work but did when you wrapped it in the 'block'-level <div> element because block elements can dictate line-height.
A better way than bloating your markup by wrapping your inline element in a block element, just use CSS to make the tag display 'inline-block'.
<a style="display:inline-block; line-height:12px;" href="#">something</a>
Even better, give your <a> a class (change 'xx' below to something semantic):
<a class="xx" href="#">something</a>
Then in your CSS file set that class to 'inline-block':
.xx { display:inline-block; line-height:12px; }
Hope that helps.
Do you have some code? Do you have some extraneous padding or margins?
This works for me in Firefox, Chrome, and IE8
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:18px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
In my understanding, every block-level element has a width-0 character called "strut". It will participate in the calculation of line box's height. When the children's line-height is smaller than parent's,It looks like the children's line-height is ignored because parent's line-height will hold up the line box when the children's line-height is smaller.
You need to use em as big text size in IE8 and IE7 will not share the same line height...e.g. using 30px font-size:
This example shows that with a 30px text size the line height in IE7 and IE8 are not on par with Chrome and FF.
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:3px;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>
This example shows using em all browsers display the same line height.em is an old system though we need to use it until IE8 and below dies out. It's good practise.
<!DOCTYPE html>
<html>
<head>
<title>aaa</title>
<style type="text/css">
p {font-size:30px;line-height:0.2em;background-color:#ccc;}
</style>
</head>
<body>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<p>
</body>
</html>