0

On a webpage I am making, the CSS-containing HTML for a headline is as follows:

<div class="headline">
<a href="#1"><span style="color: #00f">&#9724;&nbsp;</span>This is a headline</a>
</div>

The &#9724; is for the Unicode character ◼, the Black Medium Square. This is showing up fine on Firefox, IE, and Opera, but on Chrome it's showing as a hollow square, the "don't know this character" symbol. I'm running all the browsers on Win7Pro.

What is the simplest way to accommodate Chrome and get it to show this symbol? I've tried using &#8718;, ∎, which is close, but it's a rectangle that isn't a square and therefore won't suffice.

I'm using the Arial font at the moment. If I need to use another font just for this character and just for Chrome that would be fine but how? Or if the closest that's possible is &#8718;, and I therefore have to put up with Chrome users getting a rectangle that isn't quite a square (which some may feel serves them right for using such a browser), what's the simplest way to target Chrome to achieve that?

3 Answers3

1

It's a pretty simple symbol you need - why not render the square with HTML and CSS?

.square {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: black;
}
<span class="square"></span>
stackingjasoncooper
  • 623
  • 5
  • 13
0

You might want to try the Hex version:
'◼'
I can't seem to make it appear properly, so go here: http://www.fileformat.info/info/unicode/char/25FC/index.htm

Barbra
  • 31
  • 7
  • Thanks, but I tried the hex version, `◼`, and it gives the same result. (It shows unrendered here if enclosed between two `s.) –  Aug 24 '17 at 22:57
  • I did put it between the marks. You can even see them :) – Barbra Aug 24 '17 at 23:17
  • You need to put it between backticks, `, not single quotes, '. :) –  Aug 24 '17 at 23:27
0

Per this SO answer, you just have to pick a range of fonts that should have the character. I used his example and it worked on Windows 7:

.force-square {
    font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol, Quivira, SunExt-A, FreeSerif, Universalia, unifont;
    display: inline-block;
}

.imitate-square {
    width: 7pt;
    height: 7pt;
    background: #000;
    display: inline-block;
}
<div>
&#9720;&#9721;&#9722;&#9723;&#9724;&#9725;&#9726;&#9727;&#9728;
</div>

<div style="font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol, Quivira, SunExt-A, FreeSerif, Universalia, unifont;">
&#9720;&#9721;&#9722;&#9723;&#9724;&#9725;&#9726;&#9727;&#9728;
</div>

<div>Imitated: <div class="imitate-square"></div></div>
<div> &nbsp;&nbsp;Forced: <div class="force-square">&#9724;</div></div>
jdgregson
  • 1,457
  • 17
  • 39
  • Thanks, but some of those fonts look quite exotic and I'm not sure that the other browsers will know them, so I think there remains the issue of targeting Chrome. –  Aug 24 '17 at 23:26
  • @ruffle Yeah, it seems like the only way to be sure what the user sees is to use an image or styled element, which limits its uses. You'd likely have to wrap that one character in a span at the very least, and then you might as well just make the span something like `` – jdgregson Aug 24 '17 at 23:35
  • That's an excellent idea! Now I don't know who to give the green tick to: to you, because you posted the idea first, or to @stackingjasoncooper, because he posted it as an answer first. –  Aug 25 '17 at 01:10
  • Well he already has _slightly_ more points than I do if that helps :P And my answer does illustrate how the `` idea looks identical to the character. – jdgregson Aug 25 '17 at 03:05