RPG Awesome
A fantasy themed font and CSS toolkit.
RPG Awesome is a suite of 495 pictographic, rpg and fantasy themes icons for easy scalable vector graphics on websites, created and maintained by Daniela Howe and Ivan Montiel.
Super shoutout to Game Icons for providing a library of SVG icons that we used to create this project
Installation
Bower
bower install rpg-awesome
NPM
npm add --save rpg-awesome
Then in your code, you can use rpg-awesome by pathing to it:
./node_modules/rpg-awesome/css/rpg-awesome.min.css
If you are using Sass, you can import it directly:
@import "node_modules/rpg-awesome/scss/rpg-awesome";
Meteor
meteor add rpg-awesome
Developing
This project uses NPM and Grunt to compile SCSS into CSS usable by browsers. The project also requires for you to have Ruby installed:
npm install
gem update --system && gem install scss-lint
grunt
Generating and Adding New Icons
We have split up the generation process of the /fonts
directory to this repo.
Any new icons will need to be added to that repo first. Then follow the steps located in that repo's documentation for generating new .eot
, .svg
, .ttf
, and .woff
files.
Note that when adding new icons to the font files, you will need to update the scss/_variables.scss
file with all of the new offsets.
The gh-pages
branch of this repo should also be updated to add the new icon to the web docs.
License
- The Rpg Awesome font is licensed under the SIL OFL 1.1:
- Rpg Awesome CSS and SASS files are licensed under the MIT License:
- The Rpg Awesome documentation is licensed under the CC BY 3.0 License:
- Attribution is appreciated but not required
- Full details: https://github.com/nagoshiashumari/Rpg-Awesome/blob/master/LICENSE.md
Spelling errors in a few icon tags
ra-vail => ra-vial ra-sherif => ra-sheriff ra-sattelite => ra-satellite ra-defibrilate => ra-defibrillate ra-heats-card => ra-hearts-card
May want to add an alias ra-energize for ra-energise (British vs. US spelling)
I would love to help out with some of these tickets. I'd need a quick primer on how to work with the woff files, etc., but if you're willing to invest the time to give me a crash course, I'd be happy to assist!
Add a version to package.json
It would be great if this could be installed via npm. You could just publish it to npm, as the name is not taken, but if you don't want to go that far, npm can install from github urls, but apparently requires
package.json
to include a version number.Icon request: icon-tankard
I think a tankard/stein icon would be a nice addition, it would be useful to represent taverns and other drinking establishments, which are a staple in the RPG genre.
A visual idea:
Thanks in advance!
How can I use the icons in the terminal?
How can i use TTF icons in the terminal, for example from Python using \u{hex value} escape codes? I've found https://github.com/nagoshiashumari/Rpg-Awesome/blob/master/scss/_variables.scss but the codes do not seem to work in the terminal, with rpg-awesome selected as the font.
Favicon + Minor meta change
Hi,
I’m a big fan of the idea of RPG-Awesome! I’m not one for making icons, but I did two small QoL changes on your website that hopefully help it out:
I added a favicon! Using the broadsword icon, I made 4 different PNG icons as well as an ico - when users visit your webpage, now they’ll see your sword in action!
I also added RPG-Awesome to the site title and description, since it’s not initially clear what your product is called from those two tags.
Icons are wack
Some of the icons aren't showing properly. Here (will be) is a list of them and what is wrong with them.
Suggestion: Demo page with full icon list
Hi all,
Congrats for this project, I really like the idea and execution.
One thing that I think is missing is a page where all icons shows up, not by theme, but the full raw icons list.
I run a small script and created this suggested demo page (+ unicode on tooltips) and attached for anyone else interested. demo_full.zip
Thanks
Add sass, style entry points, update README
The main entry in the package.json does not make sense in this case since RPG Awesome does not come with JavaScript.
Instead, a sass and style entry have been added as well as documentation on how to import the sass directly.
Close #55
Favicon for http://nagoshiashumari.github.io/Rpg-Awesome/
I have a toolbar bookmark for FontAwesome as a quick icon reference, and would love to have one for RPGAwesome as well, but it's hard to find it on my bookmarks without an icon.
Wrong info: Icon is Turd but is shows as Turn.
http://nagoshiashumari.github.io/Rpg-Awesome/ - Near the bottom of the RPG Icons section. The icon for turd is shown as being
ra-turn
instead ofra-turd
Minor wrong info
At the Danger section,
<div class="ra-hover col-md-3 col-sm-4"><i class="ra ra-fall-down"></i> ra-falling-down </div>
in the html code, icon is ra-fall-down but on the page, ra-falling-down.
At the RPG Icons section, is montains is a typo?
Space
Icon Request: Fantasy "races" like Elves, Humans, Orcs, Undead
I would love there to be some icons that represent indviduals/races.
Looking at what's already made:
ra-hood - looks like it could be either a "Spy" or an "Archer", but if there was some ways to make it have elvish ears, I think it could be a convincing "Elf"
ra-broken-skull, ra-skull, and ra-death-skull both look like great skulls on their own. I'd maybe suggest ra-death-skull to not have the circular platform underneath it, and now this is an icon for "Undead" or "Skeleton" fighters.
ra-monster-skull - this is probably my favorite out of the bunch. I could maybe see the removal of the horns and some sort of change to the skulls shape to differ it from a "human" skull, and you'll have an Orc.
ra-knight-helmet - I think this is probably as good of a human icon as one could expect.
Icon Request: Backpack
I would like a Backpack Icon, useful for virtual table top to allow people to mannage their inventories on site instead of externally such as via D&D beyonds
Incorrect icon name at https://nagoshiashumari.github.io/Rpg-Awesome/
I believe the icon name at: https://nagoshiashumari.github.io/Rpg-Awesome/ for "ra-crossed-sabers" is incorrect.
I am unable to load icons with this name.
If I change this name to "ra-crossed-sabres"
Where "sabre" is spelled correctly with an "re" instead of an "er" I am able to load the icon.
Icon Request: icon-deck, icon-deck-fan, icon-deck-draw
Here's a basic Idea of what I'm thinking.
My personal use case for these is storing backup text files of my Magic The Gathering Cards in Obsidian (A note taking app) The Icon in the top left would be replaced with a deck icon.
Both the deck and deck-fan could be useful. For example, I might want to store my main deck under the deck icon and the sideboard under deck fan icon. I could also use the deck icon to represent tokens cards that are needed for the deck.
icon-deck-draw could be very similar to icon-deck except one card offset to represent drawing a card.
I'm sure people could easily find many uses for these three Icons.