Creating a Theme for Tiki? See


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


There is a Smarty function which helps to insert icons in the code:

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

Tiki 14 - Icon sets


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:


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."


 Buttons with icon and text?
Use bootstrap way, example:
<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}">

<button type="submit" class="btn btn-primary btn-sm" name="zip">{icon name="file-archive-o"} {tr}Generate zip{/tr}</button>

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


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',


Glyphicons iconset

function iconset_glyphicons()
	return array(
		'name' => tr('Glyphicons'),
		'description' => tr('Glyphicon focused iconset, see'),
		'tag' => 'span',
		'prepend' => 'glyphicon glyphicon-',
		'append' => '',
		'icons' => array(
			'actions' => array(
				'id' => 'play-circle',
			'add' => array(
				'id' => 'plus-sign',
		'defaults' => array(

Legacy iconset (mainly famfamfam icons)

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.




 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:

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

References Equivalent Glyphicons - Font Awesome Cheatsheet - 1 Equivalent Glyphicons - Font Awesome Cheatsheet - 2 The complete set of 479 icons in Font Awesome 4.2.0 A side-by-side comparison between popular icon fonts made for Bootstrap.

Also see Icon Fonts at Themes site

Show PHP error messages