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

Why?

The goal of having iconsets 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 will 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)
- The only accepted way to include an icon in a smarty tpl file is to use the icon smarty_tiki function in the tpl files like this: {icon name="nameoftheicon"} (This also means that {glyph} and {fa} functions are to be deprected and the affected tpls should be changed to use {icon} smarty function.)

 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). Naming can be taken from anywhere, in order to make this quick most names are taken from what is used by font-awesome, see here: http://fontawesome.io/cheatsheet (by removing "fa-" from the beginning)

- Icons are part of an iconset. Iconsets are defined using a multidimensional array in a php file that provide path and settings for the icon files.

- Cascading iconset approach (similar to css): have a base (default) iconset, other iconsets need to define only what should be different than the default iconset

- Tiki ships with a default iconset (themes/base_files/iconsets/default.php), which is the fallback for all other iconsets. This file should not be modified for local customisations.
- File name convention for iconsets: nothing special, it just have to be distinct than the existing ones in the themes/base_files/iconsets/ folder

- If you want to contribute an iconset to Tiki, put it to the themes/base_files/iconsets/ folder with a distinct name eg: mybelovediconset.php, famfam.php etc. In the Look&Feel administration you can choose from the iconsets shipped with Tiki.

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
- 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
- add more icon definitions to iconsets
- iconsets shipped with Tiki are now in the themes/base_files/iconsets folder
- 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

Work in progress

$iconset = array(
	'_settings' => array( //Iconset settings
		'iconset_name' => tr('Default'), //mandatory, this will be displayed as Iconset option in the Look&Feel admin UI
		'iconset_description' => tr('The default system iconset'), //this will be displayed as Iconset description in the Look&Feel admin UI
		'icon_path_svg' => '', //TODO The default path for svgs in the iconset so that you dont need to specify for each icon. You can override this for each icon using the path_svg option
		'icon_path_font' => '', //TODO The default path for font icons in the iconset so that you dont need to specify for each icon. You can override this for each icon using the path_font option
		'icon_path_image' => '' , //The default path for images in the iconset so that you dont need to specify for each icon. You can override this for each icon using the image_path option
		'icon_tag' => 'i', //The default html tag for the icons in the iconset. TODO: You can override this for each icon using the tag option
		'icon_type' => 'font', //TODO The default file type for the icons in the iconset. Possible values: svg, font, png, jpeg. You can override this for each icon using the type option. Type sequence: 1)svg 2)font 3)image, so icon function will first use what is in the path_svg, than path_font, than path_png
	),
	'save' => array( //This is the definition of an icon in the iconset. 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
		'alias_for' => '', //allows to have alias for another, enables to take configuration from another icon. maybe specify separately for svg, font and png?
		'class' => 'fa fa-save', //this is the class used for a glyphicon or a font-awesome icon  
		'alt' => tr('Save'),  //alternate text for an image, if the image cannot be displayed (http://www.w3schools.com/tags/att_img_alt.asp)
		'svg_path' => '', //TODO Specify the URL for an svg definition. Optional, if not defined, the default defined at _settings is used.
		'font_path' => '', //TODO Specify the URL for font icon. Optional, if not defined, the default defined at _settings is used.
		'image_path' => '', //TODO Specify the URL of an image. Optional, if not defined, the default defined at _settings is used.
		'image_file_name' => '', //TODO Specify the name of an image file, eg: 'disk.png' 
		'tag' => 'span', //TODO specify an html tag
	),
);

Samples

Custom iconset - fontawesome only

$iconset = array(
	'_settings' => array(
		'iconset_name' => tr('Font-awesome'),
		'iconset_description' => tr('Font-awesome focused iconset, see http://fortawesome.github.io/Font-Awesome/icons/'),
		'icon_tag' => 'i', 
	),
	'file-archive' => array( 
		'class' => 'fa fa-file-archive-o',
	),
	'trash' => array( 
		'class' => 'fa fa-trash-o',
	),
);

Custom iconset - famfamfam only

$iconset = array(
	'_settings' => array(
		'iconset_name' => tr('Legacy'),
		'iconset_description' => tr('Legacy (pre Tiki14) icons, mainly using famfamfam images'),
		'icon_path_image' => 'img/icons',
		'icon_tag' => 'img',
	),
	'trash' => array( 
		'image_file_name' => 'bin.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
TikiTests 2.x
Theme
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]