Roll20 Wiki

== Styling Checkboxes and Radio Buttons ==
[http://jsfiddle.net/waNSL/ Live Demo]

Checkboxes and radio buttons don't like getting changed much. Instead, it can be easier to ''hide'' the actual checkbox/radio and put a more cooperative element underneath.
<pre data-language="html" style="margin-bottom: 5px"><input type="checkbox"><span></span>
<input type="radio" name="attr_r"><span></span>
<input type="radio" name="attr_r"><span></span>
<input type="radio" name="attr_r"><span></span>
<input type="radio" name="attr_r"><span></span>
<input type="radio" name="attr_r"><span></span></pre>
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio/checkbox */
input[type="radio"],
input[type="checkbox"] {
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* Fake radio/checkbox */
input[type="radio"] + span::before,
input[type="checkbox"] + span::before {
    margin-right: 4px;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 2px #ccc;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
}

/* Fake radio */
input[type="radio"] + span::before {
    content: "";
    width: 12px;
    height: 12px;
    font-size: 24px;
    border-radius: 50%;
}

input[type="radio"]:checked + span::before {
    content: "•";
}

/* Fake checkbox */
input[type="checkbox"] + span::before {
    content: "";
    width: 14px;
    height: 14px;
    font-size: 12px;
    border-radius: 3px;
}

input[type="checkbox"]:checked + span::before {
    content: "✓";
}</pre>
The key here is the <code>opacity: 0;</code> set on the actual input, and then the <code>width</code>, <code>height</code>, and <code>content</code> set on the span::before ''immediately'' following the input. The checkbox/radio will be on top of the span: invisible, but still clickable. When the checkbox/radio is selected, then, the style on the span::before is changed.

{{note|Because of the way this is set up, '''if you do not have a span element immediately following your checkbox/radio button, the checkbox/radio button will not be visible.'''}}

=== Alternative Checkboxes ===
[http://jsfiddle.net/su9ac/ Live Demo]

You're not restricted to a box with a check on it if you want a binary state (on or off). When styling your checkbox (or radio button!) you can use just about anything.
<pre data-language="css">/* Fake checkbox */
input[type="checkbox"] + span::before {
    margin-right: 4px;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    content: "▼";
    width: 14px;
    height: 14px;
    font-size: 12px;
}

input[type="checkbox"]:checked + span::before {
    content: "►";
}</pre>
Now, instead of an empty box, or a box with a checkmark, you've got a right-pointing arrow or a down-pointing arrow. You can also use an image instead of a string, such as <code>content: url(<nowiki>http://i.imgur.com/90HuQPr.png</nowiki>);</code>

=== Fill Radio Buttons to the Left ===
[http://jsfiddle.net/sqaz6/ Live Demo]

A number of games use a set of bubbles, filled in from left to right, to represent various traits. Radio buttons can only have one selected value, however, and if we used a set of checkboxes, it would be annoying to make the user click each and every one of them to set the character's attribute. Also, a set of checkboxes would make macros extremely ugly: <code>@{Strength_1} * 1 + @{Strength_2} * 1 + ...</code>

However, with the radio button styling, we can solve this problem and use a radio button anyway, and only have one value.
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_r" value="1" checked="checked"><span></span>
<input type="radio" name="attr_r" value="2"><span></span>
<input type="radio" name="attr_r" value="3"><span></span>
<input type="radio" name="attr_r" value="4"><span></span>
<input type="radio" name="attr_r" value="5"><span></span></pre>
<pre data-language="css" style="margin-top: 5px">/* Hide actual radio */
input[type="radio"] {
    opacity: 0;
    width: 16px;
    height: 16px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -10px;
    cursor: pointer;
    z-index: 1;
}

/* Fake radio */
input[type="radio"] + span::before {
    margin-right: 4px;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 2px #ccc;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
    content: "•";
    width: 12px;
    height: 12px;
    font-size: 24px;
    border-radius: 50%;
}

/* Remove dot from all radios _after_ selected one */
input[type="radio"]:checked ~ input[type="radio"] + span::before {    
    content: "";
}</pre>
Here, ''all'' radio buttons are styled by default to appear as though they're checked. The radio buttons ''after'' the one that's actually checked then have the dot removed. The result is that the checked radio button and all of the ones to the left are "filled in," while the ones to the left are empty. You can invert this behavior (right of the checked radio are filled, checked and left of checked are empty) by swapping the two <code>content</code> lines.

To reverse this behavior (checked radio and right of checked radio are filled, left of checked radio are empty), swap the two <code>content</code> lines and change the last selector to this:
<pre data-language="css">input[type="radio"]:checked ~ input[type="radio"] + span::before,
input[type="radio"]:checked + span::before</pre>
{{note|If no radio button is selected, all of them will appear filled in (or all will appear empty if you've reversed/inverted the CSS). Therefore, it is wise to include <code><nowiki>checked="checked"</nowiki></code> on one of the radio buttons. That said, you may desire a "zero" value for the trait in question. I recommend having an extra radio button with <code><nowiki>value="0" checked="checked"</nowiki></code> and '''without''' the span element immediately following it. This will give you an initial value of 0, your radio button group will appear as intended, and the "zero" value will not show up to the user.}}

{{note|All radio buttons which are siblings will be affected by the selection of one of the radios. It is therefore recommended that you wrap the button group in some element, such as span or div.}}

=== Circular Layouts ===
[http://jsfiddle.net/6Uqhd/ Live Demo]

Some character sheets have rather interesting layouts. [[Mage: the Ascension]], for example, has a pair of traits called Quintessence and Paradox that are both mapped onto a wheel of checkboxes.
<pre data-language="html" style="margin-bottom: 5px"><div>
    <div>
        <input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle sheet-left-1" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-three-eighth sheet-left-2" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-quarter sheet-left-3" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-eighth sheet-left-4" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-top sheet-left-5" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-top sheet-left-6" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-eighth sheet-left-7" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-quarter sheet-left-8" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-three-eighth sheet-left-9" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle sheet-left-10" value="1"><span></span>
    </div>
    <div>
        <input type="checkbox" class="sheet-wheel sheet-wheel171 sheet-middle-2 sheet-left-1" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel153 sheet-mid-five-eighth sheet-left-2" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel135 sheet-mid-three-quarter sheet-left-3" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel117 sheet-mid-seven-eighth sheet-left-4" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel99 sheet-bottom sheet-left-5" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel81 sheet-bottom sheet-left-6" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel63 sheet-mid-seven-eighth sheet-left-7" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel45 sheet-mid-three-quarter sheet-left-8" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel27 sheet-mid-five-eighth sheet-left-9" value="1"><span></span>
        <input type="checkbox" class="sheet-wheel sheet-wheel9 sheet-middle-2 sheet-left-10" value="1"><span></span>
    </div>
    <div class="sheet-marker">•</div>
</div></pre>
<pre data-language="css" style="margin-top: 5px">/* Hide actual checkbox */
input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    z-index: 1;
    margin-top: 6px;
}

/* Fake checkbox */
input[type="checkbox"] + span::before {
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: middle;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 2px #ccc;
    background: #f6f6f6;
    background: radial-gradient(#f6f6f6, #dfdfdf);
    position: relative;
    content: "";
    width: 14px;
    height: 14px;
    font-size: 12px;
    border-radius: 3px;
}

/* Styles unique to fake checkbox (checked) */
input[type="checkbox"]:checked + span::before {
    content: "✓";
    color: #a00;
    box-shadow: 0 0 2px transparent;
}

/* Position checkboxes vertically in circle */
input.sheet-top  { margin-top: 5px; }
input.sheet-top + span::before { top: 0px; }
input.sheet-mid-eighth { margin-top: 12px; }
input.sheet-mid-eighth + span::before  { top: 7px; }
input.sheet-mid-quarter { margin-top: 27px; }
input.sheet-mid-quarter + span::before  { top: 22px; }
input.sheet-mid-three-eighth { margin-top: 45px; }
input.sheet-mid-three-eighth + span::before  { top: 40px; }
input.sheet-middle { margin-top: 67px; }
input.sheet-middle + span::before  { top: 62px; }
input.sheet-middle-2 { margin-top: 73px; }
input.sheet-middle-2 + span::before  { top: 68px; }
input.sheet-mid-five-eighth { margin-top: 95px; }
input.sheet-mid-five-eighth + span::before  { top: 90px; }
input.sheet-mid-three-quarter { margin-top: 113px; }
input.sheet-mid-three-quarter + span::before  { top: 108px; }
input.sheet-mid-seven-eighth { margin-top: 127px; }
input.sheet-mid-seven-eighth + span::before  { top: 122px; }
input.sheet-bottom { margin-top: 135px; }
input.sheet-bottom + span,
input.sheet-bottom + span::before  { top: 130px; }

/* Position checkboxes horizontally in circle */
input.sheet-left-1 { margin-left: 14px; }
input.sheet-left-1 + span::before  { left: 14px; }
input.sheet-left-2 { margin-left: 1px; }
input.sheet-left-2 + span::before  { left: 1px; }
input.sheet-left-3 { margin-left: -4px; }
input.sheet-left-3 + span::before  { left: -4px; }
input.sheet-left-4 { margin-left: -5px; }
input.sheet-left-4 + span::before  { left: -5px; }
input.sheet-left-5 { margin-left: -2px; }
input.sheet-left-5 + span::before  { left: -2px; }
input.sheet-left-6 { margin-left: 1px; }
input.sheet-left-6 + span::before  { left: 1px; }
input.sheet-left-7 { margin-left: 3px; }
input.sheet-left-7 + span::before  { left: 3px; }
input.sheet-left-8 { margin-left: 2px; }
input.sheet-left-8 + span::before  { left: 2px; }
input.sheet-left-9 { margin-left: -4px; }
input.sheet-left-9 + span::before  { left: -4px; }
input.sheet-left-10 { margin-left: -16px; }
input.sheet-left-10 + span::before  { left: -16px; }

/* Rotate checkboxes */
input.sheet-wheel9,
input.sheet-wheel9 + span::before { transform: rotate(9deg); }
input.sheet-wheel27,
input.sheet-wheel27 + span::before { transform: rotate(27deg); }
input.sheet-wheel45,
input.sheet-wheel45 + span::before { transform: rotate(45deg); }
input.sheet-wheel63,
input.sheet-wheel63 + span::before { transform: rotate(63deg); }
input.sheet-wheel81,
input.sheet-wheel81 + span::before { transform: rotate(81deg); }
input.sheet-wheel99,
input.sheet-wheel99 + span::before { transform: rotate(99deg); }
input.sheet-wheel117,
input.sheet-wheel117 + span::before { transform: rotate(117deg); }
input.sheet-wheel135,
input.sheet-wheel135 + span::before { transform: rotate(135deg); }
input.sheet-wheel153,
input.sheet-wheel153 + span::before { transform: rotate(153deg); }
input.sheet-wheel171,
input.sheet-wheel171 + span::before { transform: rotate(171deg); }

div.sheet-marker {
    margin: 36px 0px 0px 5px;
    font-size: 20px;
}</pre>

== Hide Areas ==
[http://jsfiddle.net/LTnd7/ Live Demo]

You can hide areas on the character sheet based on the state of a checkbox. Instead of the adjacent sibling selector (<code>+</code>) used by [[#Styling Checkboxes and Radio Buttons|custom checkboxes]], you should use the sibling selector (<code>~</code>).
<pre data-language="html" style="margin-bottom: 5px"><div>
    <input type="checkbox" class="sheet-arrow">
    <h4>Stuff and Things</h4>
    <div class="sheet-body">
        <input type="text" placeholder="Name" name="attr_name"><br>
        <input type="text" placeholder="Description" name="attr_description">
        <input type="number" min="0" max="20" value="0" name="attr_level"><br>
        <textarea placeholder="Fulltext" name="attr_bio"></textarea>
    </div>
</div>
<div>
    <input type="checkbox" class="sheet-arrow">
    <h4>More Stuff</h4>
    <div class="sheet-body">
        <input type="text" placeholder="Name" name="attr_alternative-name"><br>
        <input type="text" placeholder="Description" name="attr_alternative-description">
        <input type="number" min="0" max="20" value="0" name="attr_alternative-level"><br>
        <textarea placeholder="Fulltext" name="attr_alternative-bio"></textarea>
    </div>
</div>
<div>
    <input type="checkbox" class="sheet-arrow">
    <h4>Other Things</h4>
    <div class="sheet-body">
        <input type="text" placeholder="Name" name="attr_class-name><br>
        <input type="text" placeholder="Description" name="attr_class-description">
        <input type="number" min="0" max="20" value="0" name="attr_class-level"><br>
        <textarea placeholder="Fulltext" name="class-bio"></textarea>
    </div>
</div></pre>
<pre data-language="css" style="margin-top: 5px">input.sheet-arrow {
    float: left;
}

input.sheet-arrow:checked ~ div.sheet-body {
    display: none;
}</pre>
Whenever one of the checkboxes in this example is checked, the following div becomes hidden.

=== Tabs ===
[http://jsfiddle.net/z866duoa/ Live demo]

A tabbed layout is essentially an extension of hidden areas, using radio inputs instead of checkbox inputs.
<pre data-language="html" style="margin-bottom: 5px"><input type="radio" name="attr_tab" class="sheet-tab sheet-tab1" value="1" checked="checked"><span title="First Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab2" value="2"><span title="Second Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab3" value="3"><span title="Third Tab"></span>
<input type="radio" name="attr_tab" class="sheet-tab sheet-tab4" value="4"><span title="Fourth Tab"></span>

<div class="sheet-tab-content sheet-tab1">
    <h1>Tab 1</h1>
    Lorem ipsum dolor sit amet
</div>

<div class="sheet-tab-content sheet-tab2">
    <h1>Tab the Second</h1>
    consectetur adipisicing elit
</div>

<div class="sheet-tab-content sheet-tab3">
    <h1>3rd Tab</h1>
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</div>

<div class="sheet-tab-content sheet-tab4">
    <h1>Fourth Tab</h1>
    Ut enim ad minim veniam
</div></pre>
<pre data-language="css" style="margin-top: 5px">div.sheet-tab-content { display: none; }

input.sheet-tab1:checked ~ div.sheet-tab1,
input.sheet-tab2:checked ~ div.sheet-tab2,
input.sheet-tab3:checked ~ div.sheet-tab3,
input.sheet-tab4:checked ~ div.sheet-tab4 { display: block; }

input.sheet-tab {
    width: 150px;
    height: 20px;
    position: relative;
    top: 5px;
    left: 6px;
    margin: -1.5px;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
}

input.sheet-tab + span::before {
    content: attr(title);
    border: solid 1px #a8a8a8;
    border-bottom-color: black;
    text-align: center;
    display: inline-block;
    background: #fff;
    background: linear-gradient(to top, #c8c8c8, #fff, #c8c8c8);
    width: 150px;
    height: 20px;
    font-size: 18px;
    position: absolute;
    top: 12px;
    left: 13px;
}

input.sheet-tab:checked + span::before {
    background: #dcdcdc;
    background: linear-gradient(to top, #fcfcfc, #dcdcdc, #fcfcfc);
    border-bottom-color: #fff;
}

input.sheet-tab:not(:first-child) + span::before { border-left: none; }

input.sheet-tab2 + span::before {
    background: #fee;
    background: linear-gradient(to top, #f8c8c8, #fee, #f8c8c8);
    left: 163px;
}

input.sheet-tab2:checked + span::before {
    background: #dcdcdc;
    background: linear-gradient(to top, #fcecec, #f8c8c8, #fcecec);
    border-bottom-color: #fcecec;
}

input.sheet-tab3 + span::before { left: 313px; }

input.sheet-tab4 + span::before { left: 463px; }

div.sheet-tab-content {
    border: 1px solid #a8a8a8;
    border-top-color: #000;
    margin: 2px 0 0 5px;
    padding: 5px;
}

div.sheet-tab2 { background-color: #fcecec; }</pre>
The key to take away from this is that we have a set of radio buttons which are '''siblings''' to the divs that contain each tab's content. Then, we hide all of the tabs' content and use the sibling selector along with the <code>:checked</code> property to show the tab content associated with that particular radio button.

The rest of this example shows off means to make your tabs look pretty, such as using <code>content: attr(title)</code> to set the text of the tab, giving them colors and borders, and even making certain tabs different from the others in some fashion.

== Hexagons ==
[http://jsfiddle.net/herrozerro/A26S9/3/ Live demo]

<pre data-language="html" style="margin-bottom: 5px"><div class="sheet-hex sheet-hex-3" style="background-color: #444; width: 100px; height: 57px">		
    <div class="sheet-inner">
        <h4>Stat</h4>
        <input type="number" style="width: 50%">
    </div>		
    <div class="sheet-corner-1"></div>
    <div class="sheet-corner-2"></div>		
</div></pre>
<pre data-language="css" style="margin-top: 5px">.sheet-hex {
    width: 100px;
    height: 57px;
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50% 50%;			
    background-size: auto 173px;							
    position: relative;
    float: left;
    margin: 25px 5px;
    text-align: center;
    zoom: 1;
}

.sheet-hex.sheet-hex-gap {
    margin-left: 86px;
}

.sheet-hex a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999em;
    position: absolute;
    top: 0;
    left: 0;
}

.sheet-hex .sheet-corner-1,
.sheet-hex .sheet-corner-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;								
    z-index: -2;						
    overflow: hidden;		
    backface-visibility: hidden;			
}

.sheet-hex .sheet-corner-1 {
    z-index:-1;
    transform: rotate(60deg);
}

.sheet-hex .sheet-corner-2 {
    transform: rotate(-60deg);
}

.sheet-hex .sheet-corner-1::before,
.sheet-hex .sheet-corner-2::before {
    width: 173px;
    height: 173px;
    content: '';
    position: absolute;
    background: inherit;
    top: 0;
    left: 0;
    z-index: 1;
    background: inherit;
    background-repeat: no-repeat;
    backface-visibility: hidden;				  
}

.sheet-hex .sheet-corner-1::before {
    transform: rotate(-60deg) translate(-87px, 0px);	
    transform-origin: 0 0;
}

.sheet-hex .sheet-corner-2::before {
    transform: rotate(60deg) translate(-48px, -11px);	
    bottom: 0;
}

/* Custom styles*/
.sheet-hex .sheet-inner { color: #eee; }

.sheet-hex h4 {
    font-family: 'Josefin Sans', sans-serif;		
    margin: 0;			
}

.sheet-hex hr {
    border: 0;
    border-top: 1px solid #eee;
    width: 60%;
    margin: 15px auto;
}

.sheet-hex p {
    font-size: 16px;
    font-family: 'Kotta One', serif;
    width: 80%;
    margin: 0 auto;
}

.sheet-hex.sheet-hex-1 { background: #74cddb; }
.sheet-hex.sheet-hex-2 { background: #f5c53c; }
.sheet-hex.sheet-hex-3 { background: #80b971; }</pre>
{{note|Make sure the hexagon's width is 57% of the hexagon's height.}}

== Icon Fonts ==
An icon font is a font which has pictures instead of letters. You can specify one of the icon fonts below with the <code>font-family</code> property. For example: <code>font-family: 'Pictos Three';</code>

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

=== Pictos Custom ===
{| class="wikitable" style="text-align:center"
|-
! Character !! Icon
|-
{{icon character|Pictos Custom|[}}
|-
{{icon character|Pictos Custom|a}}
|-
{{icon character|Pictos Custom|e}}
|-
{{icon character|Pictos Custom|i}}
|-
{{icon character|Pictos Custom|o}}
|-
{{icon character|Pictos Custom|p}}
|-
{{icon character|Pictos Custom|q}}
|-
{{icon character|Pictos Custom|r}}
|-
{{icon character|Pictos Custom|t}}
|-
{{icon character|Pictos Custom|u}}
|-
{{icon character|Pictos Custom|w}}
|-
{{icon character|Pictos Custom|y}}
|}

=== Pictos Three ===
{| class="wikitable" style="text-align:center"
|-
! Character !! Icon
|-
{{icon character|Pictos Three|a}}
|-
{{icon character|Pictos Three|b}}
|-
{{icon character|Pictos Three|c}}
|-
{{icon character|Pictos Three|d}}
|-
{{icon character|Pictos Three|e}}
|-
{{icon character|Pictos Three|f}}
|-
{{icon character|Pictos Three|g}}
|-
{{icon character|Pictos Three|h}}
|-
{{icon character|Pictos Three|i}}
|-
{{icon character|Pictos Three|j}}
|-
{{icon character|Pictos Three|k}}
|-
{{icon character|Pictos Three|l}}
|}

=== dicefontd6 ===
<p style="font-family:dicefontd6">abcdefg</p>

=== dicefontd8 ===
<p style="font-family:dicefontd8">abcdefg</p>

=== dicefontd10 ===
<p style="font-family:dicefontd10">abcdefg</p>

=== dicefontd12 ===
<p style="font-family:dicefontd12">abcdefg</p>

=== dicefontd20 ===
<p style="font-family:dicefontd20">abcdefg</p>