Custom Icon fonts


(webcore) #1

I’m trying to use a custom icon font in Rapidweaver. How to set this up so the icons also display in preview mode inside Rapidweaver? Apparently the only way to do it is using the Resources folder but no matter where i put the css code the best i can get is a letter displaying instead of the icon (i’m using iconmoon to generate the icon font).
Any help would be appreciated.


(Brad Halstead) #2

@webcore

Not familiar with that font source as I use FontAwesome everywhere…

I’m not sure what you are putting into the resources group of the project so tough to make a recommendation without seeing what you are doing?

Are you referencing the iconmoon files via http request (external reference to your site)?

Is your page a PHP page or HTML? PHP does not preview as there is no built in server to convert the code to html.

Generally speaking, I would go by these instructions but without seeing the code I am guessing at best…

Add font files to resources

Reference these font files via the resource macro font src=%resource(fontname.ext)% in your scripts. If you have the font files in a folder of resources, then the macro would change to src=%resource(folder/fontname.ext)%

You may or may not have to add quotes around the resource macro, depending on where it is…

Scripts go in the head section of the page, if they are to be site wide they go in the head section of the site preferences

A starting point without much to go from… hopefully that helps
Brad


(Peter Danckwerts) #3

You don’t need to put the font in resources for it to show up in preview but it’s as good a place as any. I usually put them straight on the server and reference them accordingly.


(webcore) #4

Thank you Brad and Peter.
I already have it working but i can only see the icons if i export the site to a folder (locally on my computer). Inside preview i only see letters, not the icons no matter if i place the fonts in the resources or not. What i have not tried yet is to upload the fonts to the server and reference them from there. Since i’m still in the beginning with this website, i have not uploaded it yet. I will try that next.

This means there’s no way to have the icons in preview mode if we use the resources folder (to be able to work locally without uploading stuff to the server)? I’m using the resource macro suggested by Brad, but still no luck. I’m placing the code in the CSS section in the Site Wide Code, referencing the font files in the resources folder but all i get is letters, not the icons. Are you sure this can be done, i mean have the icons working in preview using the resources folder?


(Brad Halstead) #5

Hi @webcore

RapidWeaver Preview will only render content such as this when the files are posted to the server (resources).

Make a holding page for your site that says coming soon or something like that and set it as your home page, make sure that all other pages are not set to "Show in Navigation’, publish and Preview should work from you from there…

Once you’re set to launch, delete the holding page, change your old home page back to home page, enable all pages to Display in Navigation, republish and viola…

HTH
Brad


(webcore) #6

Thank you Brad. I’ve uploaded the site to the server and the icons now appear in preview which solves my original issue.

It’s a pity that RapidWeaver can’t do this locally. When creating a new site and following your suggestions it may not be a problem, but if there’s already an existing site on the server, how one would handle this? You have to create a dev folder or similar upload the site there to make the preview work inside RapidWeaver and then when we have the site finished move everything to the correct folder in the server and manually update all the paths of the resources files in RapidWeaver… Am i missing something?

Again thanks for your support :slight_smile:
Really appreciate it.


(Brad Halstead) #7

@webcore

You could use MAMP as a local server for testing… There is a way to use built in server to OSX posted somewhere on the forum, can’t find it at first glance but it is there… or you can use ForeGround’s SmartPreview app…

You could also create a folder on your server called test or v2 for the re-developed site and point the project to that folder as the root for publishing purposes. Once the client/you are happy with it, simply change the project path/publishing path back to site root and publish.

NOTE: You will have to use an FTP program to manually go to your server to delete old unused files or assets and the test/v2 folder and contents because RW will not ever delete site files on the server…

Does that help?

Brad


(webcore) #8

You could also create a folder on your server called test or v2 for the re-developed site and point the project to that folder as the root for publishing purposes. Once the client/you are happy with it, simply change the project path/publishing path back to site root and publish.

That’s what i’ve done. All working now. Time to move to website development.
Thanks for all your help.