I had a similar problem and managed to fix it as shown below. BUT, I did not use this ratchet-ios7.css, and after looking at it a bit, it looks like my answer will apply to that part of your question. This answer is specifically designed to add badges to ratchet badges.
So then:
Go to http://icomoon.io/app/
Import ratchicons.svg (found in the ratchet / ratchicons directory) and import the .svg icon set you want to add to it. (They also have a bunch of their own icon sets)
Select any / all of the icons you want to include (I suggest at least including all welts, just to make sure that this does not ruin the work of the Ratchet material, and therefore you won’t have to edit it yourself). When you are satisfied, click the "Font" button at the bottom of the window and you will see all the selected icons and their codes (the same as those visible at the bottom of the ratchet.css file).
In the upper left corner, make sure that "U +" is set to true. If it is a darker shade of gray and you see your unicode attributes under the icons (for example, "e600"), then it is set to true. I'm not quite sure that “fi” switches in terms of how this affects the code, but I just left it alone (just to play it safely).
Go through the list and change the names of any badges you want if they do not accurately convey what they are and / or if they do not comply with the naming convention.
Also in the upper left corner, click the "Settings" button, and in the "Font Name" input field, replace "icomoon" with "ratchicons". I don’t remember whether I changed the “Class Prefix” field or not, although I don’t think it is especially important (someone can correct me about this). Finally, make sure the "Encode and enter font in CSS" checkbox is selected. Click the "X" button in the upper right corner.
When everything looks like schpick-n-schpam, click the download button in the footer and you will get a zip folder.
Unzip this suction cup and inside to see several folders / files; the one we are looking for is “fonts”. Open it. Inside you will see 4 files, each of which is called ratchicons, and each with a different file extension (all of these are the ones we need!). Copy all 4 files.
Navigate to your ratchicons folder (the one from which you got the ratchicons.svg source file), and just rename it all to something else (for example, "ratchicons.woff" → "ratchicons_old.woff"), just to save the workers. Insert new files here.
Now editing the ratchet.css file directly is not the best practice, but it does not create any problems as far as I experienced, so we are going to do just that. Open ratchet.css and go straight to the bottom. You will see all .concss selectors that come standard with ratchet gear, and now we'll add new ones. Go back to the folder that you downloaded and unpacked and open style.css. See all these .icon - *: before {} selectors, for example those in ratchet.css? Copy them all and paste them into ratchet.css file
Now you can use your new badges just like the standard ratchet badges! Just use the name of the icon that you indicated on the website with the class = "attribute. If you need to change the name or something else, just make changes to the ratchet.css file. Also, for everything I missed, and / or if you're interested, here are the docs for IcoMoon: http://icomoon.io/#docs
Update
As indicated in the comments, in unicode strings the numbers in the code must be higher than 255. Otherwise, they will conflict with the usual characters of the ASCII character. I'm not sure what the lower limit is, but if you stick to much higher numbers (500s-900s), you should not worry about that.
Dantheman
source share