Tiny script to convert a decimal code to an ascii string...
This could be used for the value of the css property content
.
npm install decimal-to-css-ascii
var codeToAscii = require('decimal-to-css-ascii');
console.log(codeToAscii(59392));
For some of my websites, I use the icon fonts generator Fontello...
The zip archive that I can download from Fontello, comes with fonts files, css and config.json
which describes the font I generated.
The generated css
files look like:
...
.ico-music:before { content: '\e800'; }
...
That's nice..
But I'd like to use Sass variables instead of '\e800'
because:
- It is not really human friendly once you get to it in your css declarations
- Adding/removing icons later in time could change the affected character ranges and break icons !
I want to generate a scss
file defining Sass variables instead, something like:
...
// All icons variables from fontello are defined inside this file: `_ico-vars.scss`
$ico-music: '\e800';
...
...
// Another scss file
@import "ico_vars";
.some-btn:before { content: $ico-music; }
...
In order to do so, I use a script written in node that will parse the config.json
file and export a scss
file from it.
Here are few lines from config.json
generated by Fontello:
"glyphs": [
{
"uid": "a6fa1de9a1c1b0d9d58cc4cde6dcf17c",
"css": "music",
"code": 59392,
"src": "custom_icons",
"selected": true,
"svg": {
"path": "M857.1 (...) 125Z",
"width": 857.1428571428571
},
"search": [
"music",
"note",
"song",
"sound"
]
},
See the code
property ? This is the value that must be converted into ascii value (from 59392
to \e800
), and this is where I use decimal-to-css-ascii
...