chrome and opera can't see unicode icons - browser

In Chrome and Opera I can't see magnifying glass icon.
What I see instead is - a rectangle.
Firefox - displays the icon.
All the browsers are up to date, on windows 7.
How to solve this.
<input type='search' placeholder='🔍'>

Related

Hide icon of extension with Chrome 49

It looks we can hide icon of extension for Chrome 48 and older. But after an update of Chrome to version 49 (dev channel), it displays my extension icon :(
I had neither "browser_action" nor "default_icon" in the manifest.json (witch is the tip for Chrome before version 49).
Any of you has the same issue ? How to get hidden the icon next to the address bar ?
This is a (brain-dead if you ask me) change by Chrome team.
Even if you don't have a browser_action, your extension will display an icon (or failing that, a tile with extension name's first letter). If you do not declare a browser_action, it will be greyed out and non-interactive, but will still be there.
The idea is to alert the user that some potentially stealthy extension is installed. As such, only the user is empowered to hide the icon, by right-clicking and selecting "Hide in Chrome Menu".
I'm 100% positive this will result in user confusion, but there's nothing you can do.

Menu item height in Internet Explorer

Why are the menu items of my site in Internet Explorer 11 so high?
I've built a Joomla 3.4.x site with Bootstrap 3.4.x.
Here's the URL: https://www.chjc.nl
There seems to be something wrong with the menu in Internet Explorer (11). In Firefox Opera and Chrome all seems OK (I haven't got MS Edge), the height is what it should be, in IE the menu items are a lot higher.
Secondly: I see list-style circles in front of the menu items in IE.
Can anyone explain what is wrong?
Also: when I change some CSS in the Inspector in IE, something may change and when I then change the CSS file, IE doesn't do what it was doing when I changed the CSS in the Inspector... This may be a totally unrelated bug.
Thanx
Thom
Thomsterdam Web Design
If you change something in your Inspector in IE, it is not changing the file on your webserver. You should open the CSS file in your IDE a.k.a. web editor and save it and upload it to your website.
You should make your <ul> and <ol> have the style list-style:none;
If you make your <a> in the dropdown <li> inline-block instead of display:block your menu will look the same in all the browsers.

Safari 9 Not Showing SVG Pinned Tab Icon

I created a new pinned-tab icon for Safari 9 on El Capitan as documented by Apple here but I can't seem to get Safari to actually show it when I pin my tab.
Here's the line in my header:
<link rel="mask-icon" href="https://towatchlist.com/img/twl.svg" color="red">
Safari does show the image just fine when I follow the link to the SVG file, but the pinned tab icon still shows the auto-generated letter image even after reloads and pin/unpin etc.
I tried opening up GitHub's SVG (which is working) and copying the general markup there but that didn't fix things either. I also poked through the Safari console briefly but didn't see it even attempting to land the SVG file.
Any suggestions on how to even debug this or ideas on what is going wrong?
Looks like Safari is aggressively caching (even the absence of) these icons. Found the answer over on Super User:
Delete the contents of the following folder:
~/Library/Safari/Template Icons
And then restart Safari.

Tool to replace the Opera Dragonfly Screenshot Utility

In Opera Dragonfly (the Dev tools used in Opera Presto), there is a tab called Utilities.
In that tab, you can "take a screenshot" which loads an image screenshot of the current page into the dev tools.
You can then zoom in/out and use the color picker and the ruler (with sizes being scaled appropriately to the zoom).
This is very useful when cutting markup as it makes it easy to measure spacing, elements, etc... accurately by zooming in.
I'm looking for a similar extension / tool / addon for Chrome / Opera / Firefox that allows me to measure using a ruler when zoomed in but haven't found anything.
Does anyone know of anything that may help?
I've found PixelZoomer for Firefox (https://addons.mozilla.org/en-US/firefox/addon/pixelzoomer/) which fulfills this need.
It allow to zoom into a screenshot made, measure pixels and pick colors.

Wide Character Font Rendering in Windows Browsers

I made a custom font to display text so that it looks like the keys on a computer keyboard and embedded it in a website.
https://googledrive.com/host/0B9zaRHzo-vktWUZUcVptR1M0OWM/test2.html
All is good on MacOS, but the wide characters render incorrectly on Chrome, IE and FF on Windows. Is this a bug with the browsers? Is something wrong with the font?
Thanks!

Resources