Loading...
 
Skip to main content

History: Icons SVG or Fonts

View published page Collapse Into Edit Sessions

Preview of version: 39 (current)

Resources

  • PRO: Contains a Tiki logo icon !
  • Is this licensing good?
  • CON: Doesn't work on older iPhone (iOS 3.1.3)
  • Social Icons -
  • Read Rachel's comment

  • Some SVG libraries

  • License at
  • Looks like most just need to be attributed to Freepik

    • Discussion

    There are hundreds of icons in Tiki. Right now, jpeg/png/gif. The opportunity is to move them progressively to a vector format. This permits scaling, styling, saving bandwidth, etc.
    There are 2 options: SVG vs fonts
    It would be a shame to maintain both if there is one that could address the needs. It would be a shame to invest migration time in one of the solutions only to do the work in double later if a change is decided.

    Feeling is that Tiki should pick the best future-thinking solution between SVG & fonts:

    Futureproof - SVG or FONT

    svg -> No Unnecessary HTTP Requests



    I just started to look into the possibility to use .SVG instead of FONT and so far I did find a bunch of discussion WHY to use SVG or not to use SVG instead of FONT when it goes to vector-icons.

    I have mainly heard about possible issues in respect of browser compatibility towards SVG, but I did NOT find ANY VG icon sets for possible integration (with a very limited! time on research).

    At the bottom of the wiki page I added the licenses for the icon FONTs mentioned on the wiki page.


    Finally the PNG fallback seems to be already sorted in Tiki for FONT thanks to our Bootstrap activists.

    For a convenient way of a PNG fallback for SVG I did not find further helpful information.
    In the end, when reviewing the licenses, I see only

    Semantic Icon Names

    Use semantic names for icon names
    Maybe based on names from here (removing "fa-" from the beginning):

    Overwriting Icons

    Make it possible for themes to override icons
    Questions looking for an answer:

    • how can you easily change icon if you don't like what is shipped by Tiki? Can it be maintained simply by adding the image path to your preferred icon in the custom css file?
    • Would it be possible, if that made any sense, to use something like "icon sets" to replace icons for a Tiki site globally? How much effort that would be?
      Example:

    Source - Guideline - License

    Pick some preferred icon source(s) so community has guidelines for consistency and make sure licensing is OK

    Fallback

    Have a Smarty function (or something) so vectorial is chosen if supported by the browser, and use png as a fallback

    • The icon sources will surely have a png fallback available
    • If no fallback is available give an error message "Please use a modern browser"

    Copy to clipboard
    {glyph name="plus"} or {fa name="automobile"}
    - maybe rework the icon smarty function (lib/smarty_tiki/function.icon.php) to manage icons in one place (update merge it with function.glyph.php and function.fa.php)

    Licenses

    Also see

    History

    Information Version
    06:25 UTC System Administrator automatic conversion 39
    Mon 04 of Feb, 2019 21:28 UTC luci remove redundant maketoc when the page already has auto-toc 38
    Mon 13 of Jun, 2016 04:46 UTC Gary Cunningham-Lee URL corrected to fix 404 error. 37
    Sun 22 of Mar, 2015 19:30 UTC Marc Laporte 36
    Wed 10 of Sep, 2014 18:28 UTC Torsten Fabricius added !!Related link to dev/Icons 35
    Mon 01 of Sep, 2014 10:54 UTC luci 34
    Sat 30 of Aug, 2014 18:27 UTC lindon 33
    Fri 29 of Aug, 2014 03:18 UTC Gary Cunningham-Lee Replaced hardcoded color with a Bootstrap class. If class's color isn't good, let's change it in the theme option stylesheet. 32
    Fri 29 of Aug, 2014 03:06 UTC Gary Cunningham-Lee Fixed typos. 31
    Fri 29 of Aug, 2014 02:28 UTC Torsten Fabricius now 40% is enough 30
    Fri 29 of Aug, 2014 02:27 UTC Torsten Fabricius Reviewed the headings 29
    Fri 29 of Aug, 2014 02:21 UTC Torsten Fabricius added bg to div and moved levels param from wrong in div to right in maketoc 28
    Fri 29 of Aug, 2014 02:19 UTC Torsten Fabricius typos mainly ;-) 27
    Fri 29 of Aug, 2014 02:17 UTC Torsten Fabricius changed to 50% and limit to level 2 to gain space on the page (heading starts with !! anyway) 26
    Fri 29 of Aug, 2014 02:16 UTC Torsten Fabricius lit width of maketoc div to 40% 25
    Fri 29 of Aug, 2014 02:15 UTC Torsten Fabricius added brackets to links and added maketoc in a right floating div 24
    Fri 29 of Aug, 2014 02:08 UTC Torsten Fabricius changed text SVG/FONT personal opinion in discussion to make it complying with the txt of the e-mail sent to the devlist a minute ago. 23
    Fri 29 of Aug, 2014 01:51 UTC Torsten Fabricius after some review of resourced mentioned here, I added a few cents to the discussion (in a box) 22
    Thu 28 of Aug, 2014 23:56 UTC Torsten Fabricius Added question to "icon sets" to "!!!! Make it possible for themes to override icons" 21
    Fri 01 of Aug, 2014 01:04 UTC Marc Laporte Oups 20
    Wed 30 of Jul, 2014 21:11 UTC Marc Laporte Old name 19
    Wed 30 of Jul, 2014 15:09 UTC Marc Laporte Thank you Simon Guibord (labalab) for suggesting this one 18
    Tue 08 of Jul, 2014 23:26 UTC gezza 17
    Tue 08 of Jul, 2014 23:16 UTC gezza 16
    Wed 02 of Jul, 2014 15:11 UTC gezza 15
    Wed 02 of Jul, 2014 14:59 UTC gezza 14
    Mon 30 of Jun, 2014 18:59 UTC gezza adding thoughts to the page 13
    Sat 28 of Jun, 2014 09:14 UTC gezza some notes 12
    Sat 24 of May, 2014 13:28 UTC Marc Laporte 11
    Sat 24 of May, 2014 13:21 UTC Marc Laporte Source for SVG icons 10
    Sat 24 of May, 2014 12:58 UTC Marc Laporte 9
    Sat 24 of May, 2014 12:42 UTC Marc Laporte 8
    Fri 09 of May, 2014 14:47 UTC luci 7
    Thu 01 of May, 2014 03:13 UTC Marc Laporte 6
    Thu 01 of May, 2014 01:04 UTC Marc Laporte Thanks Mike! 5
    Fri 21 of Mar, 2014 03:41 UTC Marc Laporte 4
    Thu 11 of Apr, 2013 01:43 UTC Marc Laporte 3
    Sat 23 of Mar, 2013 14:10 UTC Marc Laporte 2
    Tue 16 of Oct, 2012 22:28 UTC Marc Laporte 1
    Collapse/expand modules below