Add trail signs to your html content. These are small inline SVG-s that are added to your content with a single CSS file.
Just add a few classes and have all the signs in all the colors that you'd ever need.
Check it out here!
1. Download the *-latest.css or *-latest.min.css file from GitHub
2. Link it in your <head>
3. Use the classes below
4. Profit
A single CSS file that contains the SVG text content and uses the :before pseudo selector and the content property to insert these SVGs. No further requests to file anywhere.
All SVGs are white and have negative space / cutout in them, making some parts transparent. These holes reveal the background color underneath, so any color can be used to insert these signs, no need to have multiple versions of the same sign just to have different colors.
This is a basic example, it will insert a blue line/stripe sign where it is.
<i class="jel jel-line jel-color-blue"></i> -> 
The basic code must contain 3 class names:
- jel
This is always required
- jel-color-{COLOR} or jel-szin-{COLOR}
Ready to use color names:
blue / kék / kek - rgb(0, 59, 128)
red / piros - rgb(199, 23, 18)
yellow / sarga / sárga - rgb(252, 184, 33)
green / zold / zöld - rgb(36, 145, 64)
purple / lila - rgb(125, 31, 122)
black / fekete - rgb(0, 0, 0)
grey / gray / szurke / szürke - rgb(128, 128, 128)
- jel-{SIGNNAME}
All signs and names are listed at the end of the page
| Icon | Name | Class(es) |
|---|---|---|
|
Sáv / Line | .jel-sav .jel-sáv .jel-vonal .jel-csik .jel-csík .jel-line .jel-band .jel-stripe |
 |
Kereszt / Cross | .jel-kereszt .jel-plusz .jel-cross .jel-plus |
 |
Csúcs / Summit | .jel-csucs .jel-csúcs .jel-haromszog .jel-háromszög .jel-top .jel-triangle .jel-summit |
 |
Település / Settlement | .jel-telep .jel-telepules .jel-település .jel-settlement .jel-education |
 |
Forrás / Source | .jel-forras .jel-forrás .jel-source .jel-dot |
 |
Barlang / Cave | .jel-barlang .jel-cave |
 |
Rom / Ruin | .jel-rom .jel-ruin .jel-L |
 |
Kápolna / Chapel | .jel-kapolna .jel-kápolna .jel-templom .jel-chapel .jel-temple |
 |
Emlékmű / Memorial | .jel-emlek .jel-emlék .jel-emlekmu .jel-emlékmű .jel-memorial .jel-monument |
 |
Pecsét / Stamp | .jel-pecset .jel-pecsét .jel-kód .jel-kod .jel-stamp .jel-code |
 |
Kör / Circle | .jel-kor .jel-kör .jel-körtúra .jel-kortura .jel-circle .jel-round |
 |
Tanösvény / Education | .jel-tan .jel-tanosveny .jel-tanösvény .jel-edu .jel-education |
 |
Kerékpár / Bike | .jel-bicikli .jel-kerekpar .jel-kerékpár .jel-bike .jel-bicycle |
 |
Sítúra / Skitour | .jel-situra .jel-sítúra .jel-ski .jel-skitour |
 |
Veszély / Danger | .jel-veszely .jel-veszély .jel-vigyazz .jel-vigyázz .jel-danger .jel-warning |
 |
Gyöngy / Pearl | .jel-gyongy .jel-gyöngy .jel-pearl |
 |
Jakab / Santiago | .jel-jakab .jel-santiago .jel-pearl |
 |
Mária / Maria | .jel-maria .jel-mária |
 |
Magyar Zarándokút / Hungarian Pilgrimage | .jel-mz .jel-magyarzarandok .jel-hungarianpilgrim .jel-hp .jel-mzarandok .jel-hpilgrim |
 |
Alapértelmezett, ismeretlen / Default, unknown | - |
| Color | Name | Class(es) |
|---|---|---|
 |
Kék / Blue | .jel-kek .jel-kék .jel-blue |
 |
Piros / Red | .jel-piros .jel-red |
 |
Sárga / Yellow | .jel-sarga .jel-sárga .jel-yellow |
 |
Zöld / Green | .jel-zold .jel-zöld .jel-green |
 |
Lila / Purple | .jel-lila .jel-purple |
 |
Fekete / Black | .jel-fekete .jel-black |
 |
Szürke / Gray | .jel-szurke .jel-szürke .jel-gray .jel-grey |
- jel-nincsarnyek / jel-noshadow (class)
This will remove the CSS dropshadow from the sign
- jel-keret / jel-border (class)
This will add a smell color matching border to the sign
- jel-nincsterkoz / jel-nowhitespace (class)
Removes the spacing before and after the sign
- jel-kicsi / jel-sm / jel-small (class)
Smaller version. This will make the height 0.75em tall.
- jel-nagy / jel-big / jel-lg / jel-large (class)
Bigger version. This will make it 1.5em tall.
- any background CSS style property (attribute)
style="background-color: teal;"
style="background-color: rgba(12, 99, 200, 0.89);"
style="background-image: linear-gradient(red, yellow);"
Any valid CSS property value pair should work
- Download the -latest.scss
- Modify to your needs
- Build / compile
- Profit
- I know there are some missing signs, mostly region and event specific ones. I'll try to trace and update all of them as quickly as I'm able to.
I don't know how much will I maintain this thing, but if you think you have something to contribute:
- Fork the Project
- Create your Feature Branch (
git checkout -b changes/modifysomethingpls) - Commit your Changes (
git commit -m 'Add some modifysomethingpls') - Push to the Branch (
git push origin changes/modifysomethingpls) - Open a Pull Request
pistika/turistajelek is licensed under the GNU Affero General Public License v3.0. See LICENSE for more information.