Pictonics

MachineGunHarry

Does anyone know how to customize the pictonic font icons on a site in the CSS?

cgregory

It is easy enough to use the existing pictonic font icons on the site and repurpose them, but it is a fairly limited set (about 20 to 30 icons if that) and not likely what you want.

I've tried using ones that use an api (http://weloveiconfonts.com/) but unfortunately they require code that is not supported here. So no luck on that front, but i think that is really the only way that it could work here is if it is an icon fonts hosting service, since traditional icon fonts require copying of files in a directory structure.

Carl

Pathfinder Campaign: "Devils and Dilettantes":https://devils-and-dilettantes.obsidianportal.com/
Shadowrun Campaign (in the works): "Deus Ex Machina":https://deusex.obsidianportal.com/

MachineGunHarry

How do yo repurpose the existing pictonic fonts?

cgregory

Well two pictronic fonts are being used on this site (at least as far as I can tell)

op-generic

@font-face {
font-family: "op-generic";
font-style: normal;
font-weight: normal;
src: url("/assets/op-generic-cd159f0ac534fbadd5940d6ec1091925.eot?#iefix") format("embedded-opentype"), url("/assets/op-generic-1d1e42708d5228dba9d734243b6ce5af.woff") format("woff"), url("/assets/op-generic-f7a4cd9edfe1d3f373b1e04b79128f61.ttf") format("truetype"), url("/assets/op-generic-748a7a1a022ed6b60b5f51156cb24743.svg#op-generic") format("svg");
}

and pictronic

@font-face {
font-family: "pictonic";
font-style: normal;
font-weight: normal;
src: url("/assets/pictonic-75b4cc48379ce7de60e0c5bffa0ecc6e.eot?#iefix") format("embedded-opentype"), url("/assets/pictonic-0c23804dd0ee6b5668608162a06175b8.ttf") format("truetype"), url("/assets/pictonic-dcd6f3d46c44a8e232896fb21eb24e5b.woff") format("woff"), url("/assets/pictonic-de67be5252eee95ebe7729ad739f1f9d.svg") format("svg");
}

The .svg file contains the id for the icons. For example the pictronic font one for the calendar is e01a
pictronic svg
/assets/pictonic-de67be5252eee95ebe7729ad739f1f9d.svg

op-generic svg
/assets/op-generic-748a7a1a022ed6b60b5f51156cb24743.svg

You'll likely need to view the page source code to read the svg files.

.icon-calendar-empty:before {
content: "";
}

if you change that code in your css to e001 you get the feather icon instead (I changed the front page icon to a "feather on here":https://deusex.obsidianportal.com/ ). That site is still in planning so i don't mind leaving up there.

.icon-calendar-empty:before {
content: "";
}

Like I said the number of icons in pictonic and op-generic are fairly limited, but you might find what you want.

Carl

"Devils and Dilettantes":https://devils-and-dilettantes.obsidianportal.com/
"Deus Ex Machina":https://deusex.obsidianportal.com/

cgregory

Also in order to change between the two icon fonts you just do something like this

.op-icon-page {font-family: 'pictonic' !important;}

this would change the font-family for .op-icon-page which is the adventure log to piconic instead of op-generic. Since the adventure log uses e001 in op-generic as it's code, it would use e001 now in the pictonic, which happens to be the feather icon, unless you change it also.

Carl

"Devils and Dilettantes":https://devils-and-dilettantes.obsidianportal.com/
"Deus Ex Machina":https://deusex.obsidianportal.com/

MachineGunHarry

Awesome!

cgregory

I've got the list of symbols and codes on the wiki of one of my sites "here":https://deusex.obsidianportal.com/wikis/icons so if you are interested in the list of what code matches to what feel free to take a look. It just a copy of the code in the css of the obsidian portal site

Carl

"Devils and Dilettantes":https://devils-and-dilettantes.obsidianportal.com/
"Deus Ex Machina":https://deusex.obsidianportal.com/