There are (at least) two ways of showing a bitcoin symbol.
One is to use font awesome and style that if you wish:
.fa-btc {
font-size: 75%;
color:#6f42c1;
opacity: 0.8;
vertical-align: -5%;
font-variant: small-caps;
}
The other is to just show the new Unicode character 20BF:
.bitcoin::before {
font-size: 80%;
opacity: 0.8;
vertical-align: 10%;
content: "\20BF";
}
I like the unicode way better. It's more subtle I guess.
But it doesn't work on Android yet. The Roboto and Nono fonts which apparently do the rendering on Android web browsers don't have it yet.
Note that I am downloading a font for my site which does have the symbol, so I'm perplexed why Android is not using it:
<!--website font-->
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">
What would be a way to detect and display the fa icon in these cases where the unicode isn't available?
Ideally, I'd like to key off of the unicode symbol being available in the font which is actually used, as opposed to just looking at the OS or other things which may or may not coincide with the symbol being available. Finding and using a certain font that has this symbol when I'm on Android OS would be a good answer too. I didn't tag Android because this isn't Android development; that just happened to be the environment that alerted me to the issue.
I combined a couple of answers regarding detecting tofu characters and replacing ::before content , and came up with this.
Text-based solution
Doesn't need code fix once Android starts working
$(document).ready(function(){
var bitcoinSymbolAvailable = document.getElementById('char-to-check').offsetWidth !== document.getElementById('not-renderable').offsetWidth;
if(!bitcoinSymbolAvailable)
$('body').append('<style>.bitcoin:before{content:"\\0E3F" !important;}</style>');
});
.bitcoin::before {
font-size: 80%;
opacity: 0.8;
vertical-align: 10%;
content: "\20BF"; /* \0E3F */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<img width="200" src="https://img.cinemablend.com/filter:scale/quill/9/a/d/3/5/0/9ad35052cecea0ff468e2f03476d9e8e385add82.jpg?mw=600">
<h1>But first you must pay me... <span class="bitcoin">1,000,000</span>
</div>
<div style="position:absolute;visibility:hidden;">
<span id="char-to-check">₿</span>
<span id="not-renderable"></span>
</div>
Related
I am using star icons from angular material to show levels, my target was that the stars will be next to each other. For that I used letter-spacing: -0.25rem; my problems that it is not render at all in ios platforms (there is spaces between the icons). I tried to add text-rendering: optimizeSpeed; and font-weight: normal; but it still doesn't reflected on ios browsers, can someone know what is the soution for that?
I'm happy to say that I received a solution to this problem.
Instead of using the mat-icon tag, I changes it to i tag and add class="material-icons" and to the material-icons CSS class
.neg-margin > * {
margin-right: -0.5em;
}
Link to solution:
https://codepen.io/GD_Design/pen/QWbYqxp?fbclid=IwAR1-emQXq1Yj3IjAonZUSCrCWYbVWmo283DGcvXNeNC0VqtvJ12vajCG7cg
On a webpage I am making, the CSS-containing HTML for a headline is as follows:
<div class="headline">
<span style="color: #00f">◼ </span>This is a headline
</div>
The ◼ 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 ∎, ∎, 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 ∎, 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?
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>
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>
◸◹◺◻◼◽◾◿☀
</div>
<div style="font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol, Quivira, SunExt-A, FreeSerif, Universalia, unifont;">
◸◹◺◻◼◽◾◿☀
</div>
<div>Imitated: <div class="imitate-square"></div></div>
<div> Forced: <div class="force-square">◼</div></div>
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
Does anyone have a good stylesheet snippet for making FontAwesome and the Material-Design icon font work well together spatially - to make Material-Design icons play well in a mostly FontAwesome site? The styles, baselines, widths are different - maybe more. The stock "material-icons" CSS class fixes the font-size at 24px. Also, the effective baseline for the Material-Design icons is far above the text baseline.
So far I've patched Google's "material-icons" CSS class with:
{
font-size: 150%;
transform: translate(-10%,20%);
}
The Material-Design icons are also wider than the Font-Awesome set - I haven't decided how to address that yet. I haven't used many icons - there may be more issues with ones I haven't tried.
I use the following code for use in navbars, buttons, wells, accordions, forms and a few other places, change it to suit your needs (you may want it perhaps bigger or thicker)
.material-icons {
font: normal normal normal 16px/1 'Material Icons';
display: inline-block;
transform: translateY(10%);
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
Better use
font-size: 115%;
vertical-align: text-bottom;
transformations make problems when you use line-height larger than 1
I had exactly the same issue of the two fonts just not playing together nicely at all!
No matter what I tried I could not fix this using CSS - each suggestion worked at first but broke down when using different font-sizes etc.
The closest I got with CSS was this:
.material-icons:before {
position: relative;
top: 0.135em;
}
In the end though, I used font forge to edit the actual font baseline and now it works a treat.
I also remapped the font into the same structure as Font Awesome so instead of:
<i class="material-icons">alarm_on</i>
I can do
<i class="md md-fw md-alarm-on"></i>
Not how the font was intended to be used and personal preference I know, but I much prefer this way of using icon fonts!
I am having a lot of trouble vertically aligning an entypo icon font.
Here is the codepen which currently displays as intended on Safari and Chrome on mac - http://codepen.io/anon/pen/jJtwz
As you can see the right arrow is vertically centred. Now the problem browsers...
Mac Firefox - The arrow is slightly lower but can tolerate this
It appears too low on the following browsers... (Every PC browser)
Mac Opera PC Chrome PC Firefox PC IE 10 PC IE 9
All the PC browsers seem to be resolved by adding a line-height:5px and getting rid of the top value.
Has anyone experienced the line height inconsistencies between browsers with icon fonts and know of a fix? It seems the OS has something to do with this as opposed to just browser inconsistencies.
I have tried all sorts of tricks like negative margins, absolute/relative positioning but cannot get consistent results.
Thanks
P.S. This was tested on all latest versions of browsers on the latest Mac OS and Windows 8
Here is the code if you cant view the link...
HTML
<section class="hbox hshop cfix">
<img src="http://placekitten.com/g/600/400">
<h3>Clothing</h3>
</section>
CSS
.hshop > a {
display: block;
border: 1px solid #ccc;
}
.hshop > a >img {
vertical-align: bottom;
padding: 0.75em 0.75em 0;
}
.hshop > a > h3 {
padding: 0.5em 0.6em;
position: relative;
font-weight: normal;
}
.hshop h3:after {
content: '\E766';
font-family: 'entypo';
position: absolute;
right: 0.3em;
font-size: 2em;
top:3px;
}
img {max-width:100%}
It was an entypo problem. The spacing around their glyphs was causing the issue. I used the icon fonts from fontello and this worked http://codepen.io/anon/pen/sidje
There are still inconsistencies in that entypo font. In all icon fonts.
The best solution I have found is set a baseline font size, and play around with you font metrics until you get something semi consistent Matching the base font metrics is a good start .This method works best if you keep the same size icon-font, changing the size throws everything off.
Also IE reacted better when I set the line-height a little smaller then the font size.
Really sloppy, but it got me close enough.
I fixed the font vertical space oiand made it available here https://github.com/zenx/entypo
The issue is connected with rendering font in different browsers. I was surprised to see the issue is reproduced only in Chrome. It works fine in Firefox, IE8, Safari and even IE6.
Here comes the sample.
And here comes the code itself:
<div style="position:absolute;bottom:2px;padding-top: 1px;width:100%;">
<span style="float:left;">
<div id="saveCustomizationButton" class="smallBlueButton">
<span>Speichern</span>
</div>
</span>
<span style="float:right;padding-right:1px;">
<div id="downloadOrPrintButton" class="smallGreenButton smallGreenButtonSmallLetterSpace">
<span>Downloaden oder drucken</span>
</div>
</span>
</div>
div.smallGreenButton span, div.smallGreenButton a {
display: block;
line-height: 14px;
padding: 1px 7px 2px 13px;
}
div.smallGreenButton {
font-family: arial,sans-serif;
font-size: 12px;
font-weight: 600;
}
div.smallBlueButton {
font-family: arial,sans-serif;
font-size: 12px;
font-weight: 600;
}
That is it. I've read about css reset, and have tried it. Any miracle -nothing's changed. Another way I was considered to use was fixing the width of the container tag. But due to the necessity to maintain multiple localisations I can't use this approach.
I hope smb will propose a solution. Or I'll need to implement some browser-specific behavior.
Waiting for your comments. Thanks in advance.
Text rendering does differ from browser to browser.Sometimes no matter how much we try to change the rendering, we won't get it. You can read this article if you want. It does not provide a solution(I don't think there is one) to this problem but it highlights the differences.