Pictonics

MachineGunHarry
MachineGunHarry
edited October 2014 in Campaign Portal Building
Does anyone know how to customize the pictonic font icons on a site in the CSS?

Comments

  • cgregory
    cgregory
    Posts: 780
    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/

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • MachineGunHarry
    MachineGunHarry
    Posts: 115
    How do yo repurpose the existing pictonic fonts?
  • cgregory
    cgregory
    Posts: 780 edited October 2014
    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/
    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780 edited October 2014
    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/
    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • MachineGunHarry
    MachineGunHarry
    Posts: 115
    Awesome!
  • cgregory
    cgregory
    Posts: 780
    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/

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

Sign In or Register to comment.

February 2024
Cyberpunk 2077 Fate Accelerated

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions