[TYPO3-english] Typo3 and Font awesome
admin at feelx.net
Wed Apr 3 14:03:21 CEST 2013
This is my template and tsconfig setup:
Part for the typoscript template (rootpage)
// allow tags in RTE
// ... to textfields
# current = 1 sets content of tag
# wrapper for Icon
wrap=<i class="icon-|"> </i>
# strips any space out of the tag
// sets the icon also to normal parsefunc (non-RTE)
lib.parseFunc.tags.icon = < lib.parseFunc_RTE.tags.icon
// enable it for header fields
lib.stdheader.10.setCurrent.parseFunc = < lib.parseFunc
lib.stdheader.10.setCurrent.htmlSpecialChars = 0
Part for the page TSConfig (rootpage)
// add custom tag plugin to RTE buttons
// allowed/denied tags
// (icon should be the enough but for further use
// when I want to display in RTE, I added <i> as well
RTE.default.proc.allowTags := addToList(i,icon)
RTE.default.proc.denyTags := removeFromList(i,icon)
// HTMLparser_rte settings
RTE.default.proc.HTMLparser_rte = 0
// don't mask special html characters like < or >
RTE.default.proc.HTMLparser_rte.htmlSpecialChars = 0
// protect specific, user defined tags
RTE.default.proc.HTMLparser_rte.tags.icon.protect = 1
// entryHTMLparser_db settings
// special html characters like < or > will be stored unmasked (get
masked by re-display in RTE)
RTE.default.proc.entryHTMLparser_db.htmlSpecialChars = -1
// protect specific tag
RTE.default.proc.entryHTMLparser_db.tags.icon.protect = 1
// protect non matching tags
RTE.default.proc.entryHTMLparser_db.keepNonMatchedTags = protect
// exitHTMLparser_db settings
RTE.default.proc.exitHTMLparser_db = 1
// protected non matched tags during fetching from database
RTE.default.proc.exitHTMLparser_db.keepNonMatchedTags = 1
// don't mask html characters like < or >
RTE.default.proc.exitHTMLparser_db.htmlSpecialChars = 0
But it's as I said just a work-around. You have to type manually
<icon>phone</icon> => <i class="icon-phone> </i>
<icon>envelope</icon> => <i class="icon-envelope> </i>
For me it's enough so far - but of course I'd appreciate an extension
too. I'm just not able to do this :)
And it's still very basic since it does not support things like this:
<i class="icon-camera-retro icon-2x"></i>
<i class="icon-spinner icon-spin">
which can be found on the awesomes website examples page.
If you or someone else has a more elegant way to realize this I'd
appreciate. And also if some bug is found. I hope I got everything so far.
>> Message: 8 Date: Tue, 02 Apr 2013 17:10:57 +0200 From: Felix
>> <admin at feelx.net> Subject: Re: [TYPO3-english] Typo3 and Font awesome
>> To: typo3-english at lists.typo3.org Message-ID:
>> <mailman.1.1364915457.15039.typo3-english at lists.typo3.org> Content-Type:
>> text/plain; charset=UTF-8; format=flowed
> Hi I did implement yesterday by
>> some RTE configuration. So Editor can enter it in Header or in
>> rte-textfield. But he still needs to edit by typing the icon-name. For
>> example ... If he wants to make the icon-barcode to be shown, he has to
>> enter <icon>barcode</icon> in header or rte_textfield. It will get
>> transformed to <i class="icon-barcode"> </i> In my opinion editor
>> can read easily what to expect by <icon>barcode</icon>. If you want I
>> can post you my rte tsconfig snippet. greetings felix Am 02.04.2013
>> 16:52, schrieb Toni Andric:
>>> > Hello,
>>> > i am wondering if there is a way to include Font awesome in to typo3
>>> > throught extension.
>>> > For example when i choose "Sitemap"> "List of subpages of selected
>>> > page" and in Headers.
>>> > I can put an icon if u put Header in text and edit code. I add
>>> > <i class="icon-xxx"> </i> inside<H> tag
>>> > but the problem is that client wount know how to do this.
>>> > Any1 know or has done this before?
> Hello Felix,
> giving you code would be awesome. I was looking around for extension for it but i couldnt find any. Font Awesome is what it says, AWESOME, and i rly use it a lot with my projects but i miss the Typo3 support for it.
> Sometimes i hardcode something or place a HTML block so i can use em. I am no extension dev or anything like it, but i am sure some1 could make an extension or it could be core.
> On Jquerymobile.com there is Codiqa, they have the solution for handling icons rly good. Select it from a dropdown, select its position Left, Right, Above, Below and thats it.
> As i said, i have a "list of subpages of selected page" throught Sitemap content element and when i place it on my web its works like a charm but i dont have the icons. I know i can make a list inside RTE and then place em manually but my client will not be able to do this.
> Send me the code u offered please so i try it out.
> Have a nice day.
> Ugodan dan
More information about the TYPO3-english