CODEWITHSUNDEEP
htmlcss
Hacker
Hacker

Reputation: 7906

Set width of icon specified in content of css

I have a code like below.

.show:before {
content: '+',
display: inline-block;
width: 10px;
}

Basically i want to set the width of the + icon. But i am not able to. What is the way to do this?

Upvotes: 0

Views: 1918

Answers (1)

Mihai T
Mihai T

Reputation: 17687

You use , after content:"+" instead of ; .

Change that and the width:10px will work. If you want to increase the size of the + icon, use font-size

See below

EDIT: after reading your comment i must tell you that - and + signs ( from the keyboard ) are not the same style of sign. The minus is in fact a hyphen-minus. You can read more here > hyphen minus .

So. There are 2 possible ways to make this work.

1. Use the correct minus-sign instead,( not the hyphen minus ) which has the unicode of U-2212.

See snippet below

.show:before {
content: '+';
display: inline-block;
width: 10px;
font-size:30px;
}
.show:after {
content: '\2212';
display: inline-block;
width: 10px;
font-size:30px;

}
<div class="show">

</div>

2. Use FontAwesome for the two icons

.show:before {
content: '\f067';
display: inline-block;

font-size:30px;
font-family:fontAwesome;
}
.show:after {
content: '\f068';
display: inline-block;

font-size:30px;
font-family:fontAwesome;

}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<div class="show">
blabla
</div>

Upvotes: 2

Related Questions