I am using fa fa-window-close-o icon. For minimizing and maximize the divs on my html i have used minus-square and plus-square. These both icons are rounded but fa-window-close-o is not. is there any way i can apply a border radius to this icon ?
window-close-o icon was very thick so i changed it a thin using
-webkit-text-stroke: 2px white; but now there is not any radius option to set it .
Related
Consider the following code
HTML
<p class="dotted3">A dotted border with squares.</p>
<p class="dotted4">A dotted border with circles.</p>
CSS
p.dotted3 {border: 3px dotted #000;}
p.dotted4 {border: 4px dotted #000;}
Why does the border at 3px look like squares but circles at 4px?
image: difference between 3 and 4px with dotted border
It looks like that's a common behavior in several browsers, probably for avoiding loss of border quality. Take a look at some examples.
Chrome (version 92.0)
Edge (version 92.0)
Safari (version 12.1)
Here, the dotted border is always showing as squares, even when it's wider (the image shows a comparison between 3px and 15px borders).
In Firefox (version 92.0), the border doesn't get squared. However, you can notice a little loss of quality in its circles.
I am using HTML CSS. In fire fox and chrome the border outline is white, the border looks like it is inside the box. However, the border outline in IE Edge is outside the box, not being able to see the white outline since it matches the white background. How can I target IE edge to give the border outline a black color, only for IE edge. Below is my code. How can I target safari to remove the default outlines when I hover? Thank you
button:focus {
outline: 3px dotted rgba(231,231,231,1.00);
outline-offset: -3px;
color:red;
}
I am using this:
<span class='fa fa-fw fa-stop'></span>
But it shows a very big square. Does anyone know if it possible to make it show just the outline of the square?
Another solution is given here, which can be used for all font-awesome icons:
Is it possible to color the fontawesome icon colors?
The css looks like this:
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #666;
color: transparent;
Unfortunately not, the icons which are provided as outline only have an additional -o in the name e.g: fa-arrow-circle-o-left - the stop icon doesn't have that option.
You could use the fa-square-o which is: http://fortawesome.github.io/Font-Awesome/icon/square-o/ which would achieve what you need - but it's not specifically the stop icon but just outlined.
You could either use fa-square-o, or you could use fa-stop and using CSS color and border rules to achieve the effect for a box with no rounded corners.
Here is a link:
http://jsfiddle.net/5mcddx2q/
.fa {
color:rgba(0,0,0,0);
border:1px solid red;
}
Or you could search for an outlined box in another set of font icons that is not font-awesome, thereare a few on bootstrap.
The problem with the webkit-based solutions is that they'll only work in webkit browsers. A slightly more portable solution would be to set the color of the icon to the same as the background (or transparent) and use text-shadow to create an outline:
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
It doesn't work in ie <10, but at least it's not restricted to webkit browsers.
For people coming across this in the future: I was solving a similar problem and came up with a tangential solution that may work depending on your scenario and the specific icon. I had a blue background and wanted a white checkmark outline, with the blue inside preserved. What I ended up doing was creating two checkmark icons- one that was white, and another that was blue but slightly smaller. I then used css to position the blue checkmark inside of the white one which achieved the desired effect. It may take some fiddling and it may not work for all use cases, but it worked for me in mine.
so I'm trying to finish up my portfolio website and I'm stuck on this dreaded contact form.
So here's my webpage.. www.heatherkirk.net/contact.php
On Chrome and (I'm guessing Safari since those two are the similar it seems), the textarea box looks different than compared to other browsers. I'm just wondering how to get the darker color on top and the lighter color throughout on the Comments part for Chrome instead of just the black outline. If anyone could help me out, I'd be grateful!
Well, Chrome's property inspector (right click, Inspect Element) says your inputs have border: 2px inset, and your textarea has border: 1px solid. Try changing that?
Firefox's property inspector doesn't show any value for border at all for the textarea, though, so that (and looking through your stylesheet) leads me to think that you've applied border-radius, but haven't set a border for your textarea at all; it just happens that Firefox's default textarea has a 2px inset border, and Webkit's (Chrome/Safari) has a 1px black one.
Add a border: 2px inset to your textarea style, and that should suffice.
When you remove the border-radius the black outline disappears.
But if you need to keep the rounded corners, then just add border-width:0px to the textarea style.
Like the user above mentioned, when you just have border:solid 1px; the default color is black, adjust that a bit.
set border:0 none; to your textarea in css
Sorry for the obtuse title; here's a jsfiddle example.
Basically, I've got a div inside of another one. The big one has a light blue background, and the little one has a darker blue background.
I want to give the smaller one a border on hover, so I start it with the same size border but the same color as the background (so that it doesn't move around when the border is added).
This border that is the same color as the background artifacts when there's a border radius. Take a look at Chrome:
But Safari is fine:
Is this a known bug? Can I submit a report?
And more importantly, is there a workaround?
How about making your border transparent:
border: 2px solid transparent;
To make this work in IE6, you can add:
*html #inner
{
border-color: pink;
filter: chroma(color=pink);
}
The IE workaround is from http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/
Sometimes you can solve these issues by using background-clip: padding-box;.
It doesn't work quite perfectly on your jsfiddle example (http://jsfiddle.net/KPAVU/5/), but may have better results with the real markup.