[TYPO3-english] Typo3 and Font awesome

[Felix]

Hi

This is my template and tsconfig setup:

Part for the typoscript template (rootpage)
................................................
// allow tags in RTE
lib.parseFunc_RTE.allowTags:=addToList(icon)
// ... to textfields
lib.parseFunc.allowTags:=addToList(icon)



lib.parseFunc_RTE.tags.icon=TEXT
lib.parseFunc_RTE.tags.icon {
     # current = 1 sets content of tag
     current=1
     # wrapper for Icon
     wrap=<i class="icon-|">&nbsp;</i>

     # strips any space out of the tag
     stripNL=1
}

// 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>&nbsp;</i>

<icon>envelope</icon>	=> <i class="icon-envelope>&nbsp;</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>
or
<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.

Greetings
felix

>
>> 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">&nbsp;</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">&nbsp;</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
> --