Loading...
 

Icons

Creating a Theme for Tiki? See https://themes.tiki.org/Icons

PHP

Try to avoid direct inclusion of any image tags in PHP including icons. See the Templates below:

Templates

There is a Smarty function which helps to insert icons in the code:
lib/smarty_tiki/function.icon.php

It will display a Tiki icon, using theme icons if they exist.


Tiki 14 - Icon sets

Why?

The goal of having icon sets is to
- make it easy to change icons in Tiki
- keep icon usage in smarty tpl files simple
- move icon customization out of the smarty tpl files
- more focus in having a centralized, future proof way of handling icons in Tiki

 Ok, but I can already override default icons through css and less, so why change anything?
Yes, if you are good with css you can override icons one-by-one.

As Gary pointed out on dev mail list, you can also modify using the bootstrap-variables.less file that contains:
@icon-font-path: "../vendor/twitter/bootstrap/fonts/";
@icon-font-name: "glyphicons-halflings-regular";
@icon-font-svg-id: "glyphicons_halflingsregular";
So this can be set as a default for the Tiki package and also on the theme level.

So why bother changing? One goal is to unify icon usage in smarty tpl-s. If only a semantic, descriptive icon name (eg: ) is used and icon attributes are shifted outside the tpls than the tpls dont need to be changed if new approaches arise (eg: few years ago you did not think icon fonts or svg-s become the new trend). It is future proof to enhance the existing icon smarty function and add the iconset definition files to manage new trends instead of modifying all the tpls.

Also as what one considers to be a nice icon is a matter of personal taste, it should be easy to change the icons sitewide. Currently it is pretty hard and time consuming.

How icons work from Tiki14

- Tiki remains to have one central function to manage icons, which is the existing icon smarty_tiki function (/lib/smarty_tiki/function.icon.php)
- To include an icon in a smarty tpl file is use the icon smarty_tiki function in the tpl files like this:

 Smarty

Rarely icons dont load when the name parameter is included in the template without quotes, so make sure you enclose the name parameter in quotes as smarty seems to like it better that way.
" Static values don't have to be enclosed in quotes, but it is required for literal strings."
http://www.smarty.net/docs/en/language.syntax.attributes.tpl
//WRONG

//RIGHT

 Buttons with icon and text?
Use bootstrap way, example:
Copy to clipboard
//WRONG <input type="submit" class="btn btn-default btn-sm" name="zip" value="{icon name="file-archive-o"} {tr}Generate a zip of those directories{/tr}"> //RIGHT <button type="submit" class="btn btn-primary btn-sm" name="zip">{icon name="file-archive-o"} {tr}Generate zip{/tr}</button> //RIGHT {icon name="trash" href="tiki-admin_system.php?do=all" class="btn btn-primary" title="{tr}Empty{/tr}"} //RIGHT but not preferred <a href="tiki-admin_system.php?do=all" class="btn btn-primary" title="{tr}Empty{/tr}">{icon name="trash"} {tr}Clear all cache{/tr}</a>


- Icons are referenced by a descriptive name in tpl-s (eg: "save", "delete", etc). Icon naming in the tpl files is focusing on functionality (eg: save, edit, delete, etc).
- Icons are part of an icon set. Icon sets are defined using a multidimensional array in a php file that provide settings and definitions for the icon files.
- Tiki ships with a default icon set (themes/base_files/iconsets/default.php), which is the fallback for all other icon sets. This file should not be modified for local customisations. The default iconset uses font-awesome fonts.

- Cascading iconset approach (similar to css): there is a base (default) icon set, other icon sets need to define only what should be different than the default icon set
- File name convention for icon sets: nothing special, it just have to be distinct than the existing ones in the themes/base_files/iconsets/ folder
- In the Look&Feel administration you can choose from the icon sets shipped with Tiki.
- If you want to contribute an icon set to Tiki, put it to the themes/base_files/iconsets/ folder with a distinct name eg: mybelovediconset.php, famfam.php etc.

Specification

Copy to clipboard
return array( 'name' => tr('Default (Font-awesome)'), // Mandatory, will be displayed as Icon set option in the Look&Feel admin UI 'description' => tr('The default system icon set using Font-awesome fonts'), // TODO display as Icon set description in the Look&Feel admin UI 'tag' => 'span', // The default html tag for the icons in the icon set. 'prepend' => 'fa fa-', 'append' => ' fa-fw', 'icons' => array( /* This is the definition of an icon in the icon set if it's an "alias" to one of the default icons. * The key must be unique, it is the "name" parameter at the icon function, * so eg: {icon name="actions"} * will find 'save' in the array and apply the specified configuration */ 'actions' => array( 'id' => 'play-circle', // id to match the defaults defined below ), 'add' => array( 'id' => 'plus-circle', ), ); }

Samples

Glyphicons iconset

Copy to clipboard
function iconset_glyphicons() { return array( 'name' => tr('Glyphicons'), 'description' => tr('Glyphicon focused iconset, see http://getbootstrap.com/components/'), 'tag' => 'span', 'prepend' => 'glyphicon glyphicon-', 'append' => '', 'icons' => array( 'actions' => array( 'id' => 'play-circle', ), 'add' => array( 'id' => 'plus-sign', ), ), 'defaults' => array( 'adjust', 'align-center', ); }

Legacy iconset (mainly famfamfam icons)

Copy to clipboard
function iconset_legacy() { return array( 'name' => tr('Legacy (pre Tiki14) icons'), 'description' => tr('Legacy (pre Tiki14) icons, mainly using famfamfam images'), 'tag' => 'img', 'prepend' => 'img/icons/', 'append' => '.png', 'icons' => array( 'actions' => array( 'id' => 'application_form', ), 'add' => array( 'id' => 'large/icon-configuration', ), 'defaults' => '', ); }

Theme specific icon set

 How to create a theme specific icon set

To create an icon set for a given theme, create a iconset.php file into the /themes/YOURTHEME/icons/ folder. For an example see themes/fivealive-lite/icons/iconset_fivealive_lite.php.
Note for theme names with hyphens (-): the file name must contain underscore instead of the hyphen.

CODE()}

{CODE}

Customization

 How to customize icon sets?

In order to customize icon sets to your needs you have the following possibilities:
1) Customize for all your themes
Create a new icon set in the themes/base_files/iconsets folder

2)Customize for a specific theme
If you like an existing theme but would like to change some icons than create a custom.php file into the /themes/YOURTHEME/icons/ folder. For an example see themes/fivealive-lite/icons/custom.php.


Params will be used as attributes for a HTML tag (e.g. class, etc.), except for special params starting with '_' :

  • - _id: short name (i.e. 'page_edit') or relative file path (i.e. 'img/icons/page_edit.png'). required
  • - _type: type of URL to use (e.g. 'absolute_uri', 'absolute_path'). Defaults to a relative URL.
  • - _tag: type of HTML tag to use (e.g. 'img', 'input_image'). Defaults to 'img' tag.
  • - _notag: if set to 'y', will only return the URL (which also handles theme icons).
  • - _menu_text: if set to 'y', will use the 'title' argument as text after the icon and place the whole content between div tags with a 'icon_menu' class (not compatible with '_notag' param set to 'y').
  • - _menu_icon: if set to 'n', will not show icon image when _menu_text is 'y'.
  • - _confirm: text to use in a popup requesting the user to confirm its action (yet only available with javascript)
  • - _defaultdir: directory to use when the _id param does not include the path
  • - _extension: Filename extension - default 'png'


When introducing new icon in .tpl file, developers should always use this icon Smarty syntax:

Copy to clipboard
{icon _id=error style="vertical-align: middle"}


The example above means it will create icon from the img/icons/error.png file and add a style attribute to it.

Tiki 13

There are glyphicons (font vector format icons) being introduced now in trunk with Bootstrap instead of bitmap (image based) icons.
For example you can have "OK" icon rendered by this HTML code:

Copy to clipboard
<span class="glyphicon glyphicon-ok"></span>



References

http://www.kelasabil.com/en/library/equivalent-glyphicons-font-awesome-cheatsheet-1 Equivalent Glyphicons - Font Awesome Cheatsheet - 1
http://www.kelasabil.com/en/library/equivalent-glyphicons-font-awesome-cheatsheet-2 Equivalent Glyphicons - Font Awesome Cheatsheet - 2
http://fortawesome.github.io/Font-Awesome/icons/ The complete set of 479 icons in Font Awesome 4.2.0
http://tagliala.github.io/vectoriconsroundup/ A side-by-side comparison between popular icon fonts made for Bootstrap.

Also see Icon Fonts at Themes site

Keywords

The following is a list of keywords that should serve as hubs for navigation within the Tiki development and should correspond to documentation keywords.

Each feature in Tiki has a wiki page which regroups all the bugs, requests for enhancements, etc. It is somewhat a form of wiki-based project management. You can also express your interest in a feature by adding it to your profile. You can also try out the Dynamic filter.

Accessibility (WAI & 508)
Accounting
Administration
Ajax
Articles & Submissions
Backlinks
Banner
Batch
BigBlueButton audio/video/chat/screensharing
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution
Cookie
Copyright
Credits
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Diagram
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs
DogFood
Draw -superseded by Diagram
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Gantt
Group
Groupmail
Help
History
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Kanban
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping
Mobile
Mods
Modules
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Packages
Payment
PDF
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Realname
Report
Revision Approval
Scheduler
Score
Search engine optimization (SEO)
Search
Security
Semantic links
Share
Shopping Cart
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tablesorter
Tags
Task
Tell a Friend
Terms and Conditions
Theme
TikiTests
Federated Timesheets
Token Access
Toolbar (Quicktags)
Tours
Trackers
TRIM
User Administration
User Files
User Menu
Watch
Webmail and Groupmail
WebServices
Wiki History, page rename, etc
Wiki plugins extends basic syntax
Wiki syntax text area, parser, etc
Wiki structure (book and table of content)
Workspace and perspectives
WYSIWTSN
WYSIWYCA
WYSIWYG
XMLRPC
XMPP




Useful Tools