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.


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:

{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:

<span class="glyphicon glyphicon-ok"></span>

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: {icon name="save"}) 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: {icon name="nameoftheicon"}

 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
{icon name=save}
//RIGHT
{icon name="save"}

 Buttons with icon and text?

Use bootstrap way, example:
//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>

//ALSO RIGHT
<a href="tiki-admin_system.php?do=all" class="btn btn-primary" title="{tr}Empty{/tr}">{icon name="trash-o"} {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.

Roadmap

Phase1 (see r52682)
- lib/prefs/theme.php and templates/admin/include_look.tpl: adding Iconset preference
- lib/smarty_tiki/function.icon.php: modify to manage "name" param
- themes/iconsets: adding folder and the some basic iconsets

- templates/tiki-admin_system.tpl: modifications for showcasing. Change the iconset preference and see here how icons are changing.

Phase2
- icon sets shipped with Tiki are in the themes/base_files/iconsets folder
- deprect lib/smarty_tiki/function.fa.php and change all instances in tpls to icon function - done r52735
- deprect lib/smarty_tiki/function.glyph.php and change all instances in tpls to icon function - done in various commits (search for glyph in the commit messages), finalized with r52960
- add more icon definitions to iconsets
- TODO: possibility to include iconset in a theme by having "themes/mytheme/iconsets" folder similar to the themes/base_files folder. Question: does it make sense to have more than one iconset in a theme? Probably one is enough

Phase3
- update in tpls all existing icon instances to use the new name param (and also remove obsolete params?)
- add more icon definitions to iconsets
- add more params to icon function if needed

Specification

$settings = array( //Settings for the icon set
	'iconset_name' => tr('Default (Font-awesome)'), //Mandatory, will be displayed as Icon set option in the Look&Feel admin UI
	'iconset_description' => tr('The default system icon set usind Font-awesome fonts'), //TODO display as Icon set description in the Look&Feel admin UI
	'icon_tag' => 'span', //The default html tag for the icons in the icon set. TODO: Override for each icon using the tag option
);

$icons = array( //Icons of the icon set
	'save' => array( //This is the definition of an icon in the icon set. For this one icon all options are explained. The key must be unique, it is the "name" parameter at the icon function, so eg: {icon name="save"} will find 'save' in the array and apply the specified configuration
		'class' => 'fa fa-save fa-fw', //Class used for a font icon (font-awesome, glyphicon, etc)
		'image_src' => '', //For images: specify the path inside your Tiki installation including the file name, eg: '/img/icons/disk.png'
	),
);

Samples

Glyphicons iconset

$settings = array(
	'iconset_name' => tr('Glyphicons'),
	'iconset_description' => tr('Glyphicon focused iconset, see http://getbootstrap.com/components/'),
	'icon_tag' => 'span',
);

$icons = array(
	'actions' => array(
		'class' => 'glyphicon glyphicon-play-circle',
	),
);

Legacy iconset (mainly famfamfam icons)

$settings = array(
	'iconset_name' => tr('Legacy'),
	'iconset_description' => tr('Legacy (pre Tiki14) icons, mainly using famfamfam images'),
	'icon_tag' => 'img',
);

$icons = array(
	'actions' => array(
		'image_src' => 'img/icons/application_form.png',
	),
);

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

Search Wishes (subject only) [Toggle]

Keywords [Toggle]

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 7.x
Administration
Ajax 2.x
Articles & Submissions
Backlinks
Banner
Batch 6.x
BigBlueButton audio/video/chat/screensharing (5.x)
Blog
Bookmark
Browser Compatibility
Calendar
Category
Chat
Comment
Communication Center
Consistency
Contacts Address book
Contact us
Content template
Contribution 2.x
Cookie
Copyright
Credits 6.x
Custom Home (and Group Home Page)
Database MySQL - MyISAM
Database MySQL - InnoDB
Date and Time
Debugger Console
Directory (of hyperlinks)
Documentation link from Tiki to doc.tiki.org (Help System)
Docs 8.x
DogFood
Draw 7.x
Dynamic Content
Preferences
Dynamic Variable
External Authentication
FAQ
Featured links
Feeds (RSS)
File Gallery
Forum
Friendship Network (Community)
Group
Help
Hotword
HTML Page
i18n (Multilingual, l10n, Babelfish)
Image Gallery
Import-Export
Install
Integrator
Interoperability
Inter-User Messages
InterTiki
jQuery
Kaltura video management
Karma
Live Support
Logs (system & action)
Lost edit protection
Mail-in
Map
Menu
Meta Tag
Missing features
Visual Mapping 3.x
Mobile Tiki and Voice Tiki
Mods
Module
MultiTiki
MyTiki
Newsletter
Notepad
OS independence (Non-Linux, Windows/IIS, Mac, BSD)
Organic Groups (Self-managed Teams)
Payment 5.x
Performance Speed / Load / Compression / Cache
Permission
Poll
Profiles
Quiz
Rating
Report
Score
Search engine optimization (SEO)
Search
Security
Semantic links 3.x
Shopping Cart 5.x
Shoutbox
Site Identity
Slideshow
Smarty Template
Social Networking
Spam protection (Anti-bot CATPCHA)
Spellcheck
Spreadsheet
Staging and Approval
Stats
Survey
Syntax Highlighter (Codemirror)
Tags 2.x
Task
Tell a Friend, alert + Social Bookmarking
Terms and Conditions
Theme
TikiTests 2.x
Timesheet
Toolbar (Quicktags)
Trackers
TRIM
User Administration
User Files
User Menu
Watch
WebHelp
Webmail and Groupmail
WebServices 3.x
Wiki 3D
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 4.x
WYSIWTSN 4.x
WYSIWYCA
WYSIWYG 2.x
XMLRPC




Useful Tools [Toggle]