Example

First include the krcg.css and krcg.js files to your webpage:

<head>
...
<link rel="stylesheet" type="text/css" href="https://static.krcg.org/web/krcg.css" />
<script src="https://static.krcg.org/web/krcg.js" />
</head>

Blogger special

For users of the Blogger platform, there is an additional script you might want to include: krcg-blogger.js, before the standard script:

<head>
...
<link rel="stylesheet" type="text/css" href="https://static.krcg.org/web/krcg.css" />
<link rel="stylesheet" type="text/css" href="https://static.krcg.org/web/krcg-blogger.css" />
<script src="https://static.krcg.org/web/krcg-blogger.js" />
<script src="https://static.krcg.org/web/krcg.js" />
</head>

This script will let you include icons and cards in your posts by using the Courier font. Then you get the following conversions:

Yes, both "disc" and "discipline" work the same, the short one is for your convenience. For a better result, you can add a small styling section in your theme so that the cards are displayed with a fitting color:

.krcg-card{
  color:$(body.link.hover.color);
}
.krcg-decklist .krcg-card{
  color: $(body.text.color);
}
.krcg-decklist .krcg-card:hover,
.krcg-decklist .krcg-card:focus {
  color: $(body.link.hover.color);
}
.krcg-decklist {
  background-color: background-color:rgba(
    $(heropost.main.background.color.red),
    $(heropost.main.background.color.green),
    $(heropost.main.background.color.blue),
    .15
  );
}

To learn how to modify your theme HTML, check this documentation. Note you can also decide not to include the blogger-specific script, and use spans and classes like all other websites, see below.

Discipline icon

Fortitude <span class="krcg-icon">f</span> → Fortitude f

Note you can use this class on any item to change its font. You can also use font-family: "Ankha VTES" instead as a style attribute anywhere you like.

Mapping

Here is the full characters map for the disciplines font ankha2.otf. Note the 5 last of the table are deprecated and kept for compatibility with the previous version of the font. Also note, that to use &, < and > in HTML code, you will need to use the escape character &amp, &lt and &gt respectively.

a a A A 0 0 ' '
b b B B 1 1 " "
c c C C 2 2 ; ;
d d D D 3 3 : :
e e E E 4 4 . .
f f F F 5 5 / /
g g G G 6 6 , ,
h h H H 7 7 \ \
i i I I 8 8 ] ]
j j J J 9 9 ` `
k k K K + + - -
l l L L = = _ _
m m M M < < ¦ ¦
n n N N > > ø ø
o o O O ^ ^ Ø Ø
p p P P | |
q q Q Q { {
r r R R ~ ~
s s S S § §
t t T T ( (
u u U U ) )
v v V V % %
w w W W & &
x x X X # # µ µ
y y Y Y * * à à
z z Z Z @ @ á á
? ? ! ! ¤ ¤ â â
$ $ £ £ } } ã ã

Clan icon from SVG image

Ventrue <img src="https://static.krcg.org/clan/ventrue.svg> → Ventrue

Clan icon from font

Nosferatu <span class="krcg-clan">s</span> → Nosferatu s

Note you can use this class on any item to change its font. You can also simple use font-family: "VTES Clans" instead as a style attribute anywhere you like.

Mapping

Here is the full characters map for the clans font vtes-clans.otf.

a a A A
b b B B 1 1
c c C C 2 2
d d D D 3 3
e e E E 4 4
f f F F 5 5
g g G G 6 6
h h H H 7 7
i i I I
j j J J
k k K K
l l L L
m m M M
n n N N
o o O O
p p P P
q q Q Q
r r R R
s s S S
t t T T
u u U U
v v V V
w w W W
x x X X
Y Y
Z Z

Note that when using this font, the newest clan icons should be preferred over their legacy variants. Here is the correspondance map between legacy and modern symbols.

Legacy Modern
D D n n
G G o o
K K r r
L L p p
T T w w
U U q q
X X s s
f f t t
h h u u
l l v v

Card image on click / hover

<span class="krcg-card">Govern the Unaligned</span>

Govern the Unaligned

You can also use custom display name by providing the card name as the data-name attribute:
<span class="krcg-card" data-name="Govern the Unaligned">GtU</span>

GtU

You can also disable the "hover" display feature using the data-nohover attribute:
<span class="krcg-card" data-nohover="true">Govern the Unaligned</span>

Govern the Unaligned

Similarily, you can disable the "click" feature using the data-noclick attribute:
<span class="krcg-card" data-noclick="true">Govern the Unaligned</span>

This example uses a very basic CSS file for styling in addition to the krcg.css file used to display cards and icons. Feel free to use it too, or use your own styles.