I have just come across this website (http://helios.io) that has an icon IN the title.
Not a favicon, but next to the title text (on the right of it).
How was this achieved?
(worked in both Safari and Chrome)
That would be the Unicode character U+1F680.
You can find it here, using the handy Unicode Character Search:
http://www.fileformat.info/info/unicode/char/search.htm?q=rocket&preview=entity
on your Mac, it's rendering used the built in emoji font - a preview is here:
http://www.iemoji.com/view/emoji/146/places/rocket
Related
I'm having problems with some Unicode character (🞻) not showing on iOS.
I have this line of code <p><a class="title" href="index.html">🞻 Luiso Vázquez</a></p> using the HTML entity of the character.
It looks good in desktop, but when it comes to Chrome on my iOS device it appears as an outlined square.
Is there anything I can do to solve this?
Thank you in advance
iOS's font doesn't cover the character you're trying to use. To fix this, you can either
Use a web font
Use an image of the character
Use a different character
I'm using Chrome Version 68.0.3440.106 (Official Build) (64-bit) on macOS Sierra 10.12.6.
I have the following code:
<div class="emoji">☺️</div>
It's rendering this:
Instead of this:
It only happens with this specific emoji. All others work fine. Why?
If you are a developer trying to fix that on your website try adding some font-family to emoji. This one worked for same issue I had.
font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;
If you are the user, you can install chrome extension which handles emojis chromoji
I know that my answer is a bit late. But I've faced with the same problem and solve it through adding to my CSS file #font-face import. Also I've downloaded NotoColorEmoji font by Google. Here is page of this font. TrueType file is on it's github. So, after this even Chromium displays emojis on my site correctly.
The CSS properties in this answer were a good attempt at making emoji "just work", but as the blog post The struggle of using native emoji on the web illustrates, it can have unintended side effects.
One problem is that the fonts treat special characters like #, * and numbers as emoji. So you need to be selective about which parts of the text have the font-family applied, and be sure the text is actually something that should be unconditionally treated as emoji.
Even if it does appear to work, the emoji that will be shown varies by OS and browser, so it's inconsistent at best.
Ultimately, I gave up on trying to make emoji work for my use case.
The U+2028 LSEP character keeps showing up around my wordpress site. Through the inspector, I can see that it is a locally rendered font such as Helvetica or Times New Roman (from what I've seen). It does not show up on all browsers however, I've seen some browsers not display this character.
I've found this Why is this symbol showing up on Chrome and not Firefox or Edge? however it hasn't really helped in removing the character from my site.
Is there a way to remove or disable the rendering of this character? While they dont show up on some computers, they still leave a blank space similar to a tag, and it screws with the structure of the site.
I've been finding a solution for this problem. I wonder why chrome displays some spaces and font changes for the japanese characters in my website like this:
Google Chrome displaying the Japanese text
While in Microsoft Edge and Mozilla Firefox is working fine:
Mozilla and Edge
Any help will do. Thank you.
Chrome version 58.0.3029.96 (64-bit)
Firefox version 53.0 (32-bit)
Edge version 38.14393.1066.0
Found already the solution for this issue. I use the standard font family for Japanese characters like MS PGothic and now i dont have problem anymore with the spacing.
Link here:
Japanese standard web fonts
I have a really strange behaviour in Safari. The problem is that I have a string (inside an tag) which has one part of it written in cyrillic (Bulgarian) and the other part written in latin (English).
On all the desktop browsers I have, it's all working good and there are no problems at all. Then I took my iPhone, and I noticed a surprise: part of the sentence is bold (as it should be according to the CSS), and part is normal.
You can see this weird behaviour here:
http://www.buderus-bg.com/bultherm/product/10
What can it be? And why I get this problem only on iOS?
The charset of the website UTF-8. And that field in the database is a utf8_general_ci.
You are trying to display the text using a font that doesn't contain Cyrillic characters (Google's Open Sans with subset=latin), so the browser will need to find a different font to display the Cyrillic text.
Solution: remove the subset=latin bit.
Edit: the fact that it happens only in iOS with Safari is a coincidence. The browser searches for a font that can display the Cyrillic characters, and what it finds is sufficiently different from Open Sans that you can see the difference in thickness. On my desktop machine, I see the difference too.