Additional icon to ratchet Ratchicon set

Question

I am using Cordova, Phonegap and Ratchet for an iOS application. How can I have additional icons with last version of Ratchet? We tried to use bootstrap icon set but it has some kind of conflict with Ratchet CSS.

I added ratchet-ios7.css from Github, and it seems have more icons but I can not use them and the documentation link of the package is not working too.

Is there any solutions?

Answer 1

I had a similar problem, and managed to fix it as below. BUT, I didn't use this ratchet-ios7.css, and after looking a bit into that, it doesn't look like my answer will apply to that part of your question. This answer is specifically to add icons to the ratchet icons.

So then:

• Go to http://icomoon.io/app/

• Import the ratchicons.svg (found in the ratchet/ratchicons directory), and import the .svg of the icon set that you want to add to it. (They also have a bunch of their own icon sets as well)

• Select any/all of the icons you want included (I suggest at least including all of the ratchicons, just to make sure it doesn't mess up with how the Ratchet stuff works and so you won't have to edit it yourself). When you're satisfied, click the "Font" button at the bottom of the window, and you'll see all the selected icons and their codes (the same ones that can be seen at the bottom of ratchet.css).

• In the top left, make sure the "U+" is toggled to true. If it is a darker shade of grey and you see their unicode attributes underneath the icons (ex. "e600"), then it is set to true. I'm not entirely sure what the "fi" toggle does in terms of how it affects the code, but I just left it alone (just to play it safe).

• Go through the list and change the names of any icons you want, if they don't accurately convey what they are and/or if they don't conform to the naming convention.

• Also in the top-left, click the Preferences button, and in the Font Name input field, replace "icomoon" with "ratchicons". I don't remember if I changed the Class Prefix field or not, though I don't think it particularly matters (someone feel free to correct me on that). Lastly, make sure "Encode & Embed Font in CSS" is checked. Click the "X" button in the top-right.

• When everything looks schpick-n-schpam, click the download button in the footer, and you'll get a zip folder.

• Unpack that sucker and inside that you will see several folders/files; the one we're looking for is "fonts". Open that one. Inside that you will see 4 files, each one named ratchicons and each with a different file extension (all of which are the ones we need!). Copy all 4 files.

• Nagivate to your ratchicons folder (the one you got the initial ratchicons.svg from), and just rename all these to something else (ex. "ratchicons.woff" -> "ratchicons_old.woff"), just to keep the working ones available. Now Paste the new files here.

• Now, editing the ratchet.css file directly isn't the best practice, but this doesn't pose any problems as far as I've experienced, so we're going to do just that. Open up ratchet.css and go right to the bottom. You'll see all the .icon- css selectors that come standard with ratchet, and now we're going to add our new ones. Go back to the folder you downloaded and unpacked and open style.css. See all those .icon-*:before{} selectors, like the ones in ratchet.css? Copy all of those, and paste them over the ones in ratchet.css

You should now be able to use your new icons in the exact same way as the standard ratchet icons! Just use the icon's name you gave on the website in the class="" attribute. If you need to change a name or something, just make the edits in the ratchet.css. Also, for anything I missed and/or if you're curious, here's the docs for IcoMoon: http://icomoon.io/#docs

Update

As pointed out in the comments, in the unicode strings, the numbers in the code must be higher than 255. Otherwise, they will conflict with normal ASCII character unicodes. I'm not sure exactly what the lower limit is, but if you stick to much higher numbers (500s-900s) you shouldn't have to worry about it.