A fantasy themed font and CSS toolkit.

  • By Daniela Howe
  • Last update: Dec 25, 2022
  • Comments: 16

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

Github

https://github.com/nagoshiashumari/Rpg-Awesome

Comments(16)

  • 1

    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!

  • 2

    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.

  • 3

    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: pngtree-game-icon-beerbeercupfriendssocial-png-image_979558

    Thanks in advance!

  • 4

    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.

  • 5

    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.

  • 6

    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.

    • [ ] acorn
    • [ ] apple
    • [ ] anvil
    • [ ] ankh
    • [ ] angel wings
    • [ ] anchor
    • [ ] all for one
    • [ ] alien fire
    • [ ] archer
    • [ ] archery target
    • [ ] arrow flights
    • [ ] arson
    • [ ] axe
    • [ ] axe swing
    • [ ] ball
    • [ ] barbed arrow
    • [ ] barrier
    • [ ] bat sword
    • [ ] battered axe
    • [ ] batteries
    • [ ] battery positive
    • [ ] bat wings
    • [ ]
    • [ ]
  • 7

    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

  • 8

    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

  • 9

    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.

  • 10

    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 of ra-turd

  • 11

    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?

  • 12

    Space

    1. Planets
    2. Star Destroiers Squad
    3. Single Star Destróier
    4. Starfighters Squad(B-wing, A-wing, X-Wing, Y-Wing, U-Wing)
    5. Single Starfighter (B-wing, A-wing, X-Wing, Y-Wing, U-Wing)
  • 13

    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.

  • 14

    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

  • 15

    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.

  • 16

    Icon Request: icon-deck, icon-deck-fan, icon-deck-draw

    Here's a basic Idea of what I'm thinking. image

    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. image

    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.