Font Awesome-Iconpicker für REDAXO 5, auch andere Font-Icons möglich
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
lang
pages
LICENCE
README.md
boot.php
help.php
install.php
package.yml
uninstall.php
update.php

README.md

Iconpicker-AddOn für REDAXO 5

Für Font Awesome-Icons, auch andere Font-Icons möglich

screenshot_iconpicker

Funktion

Das Iconpicker-AddOn verwendet folgendes Skript: http://mjolnic.com/fontawesome-iconpicker/

Eventuelle Anpassungen beim Aufruf des Iconpickers können am besten in die Datei assets/iconpicker.js geschrieben werden.

Benutzung

Um den Iconpicker für ein Textfeld zu aktivieren, diesem die CSS-Klasse "icp" zuweisen.

<input class="form-control icp" type="text" name="REX_INPUT_VALUE[1]" value="REX_VALUE[1]">

Hinweis

Damit das Popup nicht abgeschnitten wird, muss der Container form-group die CSS-Eigenschaft overflow: visible haben. Die Position des Popups kann über data-placement bestimmt werden.

Der vollständige Beispiel-Code für ein Modul könnte also so aussehen:

<div class="form-group" style="overflow: visible;">
	<label class="col-sm-2 control-label">Icon</label>
	<div class="col-sm-10">
		<input data-placement="bottomRight" class="form-control icp" type="text" name="REX_INPUT_VALUE[1]" value="REX_VALUE[1]">
	</div>
</div>

Filtern direkt im Input-Feld

Um die Icons direkt im Input-Feld zu filtern, wird data-input-search="true" gesetzt:

<input data-input-search="true" class="form-control icp" type="text" name="REX_INPUT_VALUE[1]" value="REX_VALUE[1]">

Darstellung als "Input Group"

Auch die in Bootstrap bekannte Komponente einer "Input group" ist möglich:

<div class="input-group">
	<input data-placement="bottomRight" class="form-control icp" type="text" name="REX_INPUT_VALUE[1]" value="REX_VALUE[1]">
	<span class="input-group-addon"></span>
</div>

Danke an @tbaddade für Inspiration.