>>>>
Pages, Files & Images

Pages, Files & Images


A guide on how to manage all of your website pages and how to upload files and include images on your pages

 

Logging in

To start managing your website the first step is to login to your website. The website address to edit your website is always your main website and “/admin” at the end i.e. http://mycommunitywebsite.onesuffolk.net/admin

Simply go to this address and then insert your username and password and click “login

 


Files

So that you can add Images or files to your website you need to upload them first to the File Storage area on the website. This is accessed by clicking on “Files” along the left hand side. (see screenshot below)

files

From here you can :-

  • Upload new files
  • Add new folders
  • Editing & Delete files
  • Re-ordering files

To upload new files, simply click the “upload” button  (see screenshot below of what the following screen looks like)

 files2

From here you can either, drag and drop the files into the area shown on the screen or you can click “choose files to upload”. If you do choose the files then this will take you to a screen which shows your computer file structure and from here you can choose to upload 1 or more files. To upload the file, simply double click on the file from your computer. This is an improvement that we have made in this version of the software, where previously, you could only upload 1 file at a time. 

If you do want to upload multiple files then click the first file you want to upload and then press and hold down the “ctrl” key on your keyboard to select other files (you can unhold down the ctrl key when you have finished selecting the files you want to upload), or if you have a group of files that are all one after each other then you can click on the first file you want to upload and then hold down the “shift” key and find the last file you want to upload. Once either of these has been done click “open” at the bottom of the box and it will automatically start the process of uploading.

It will tell you when your files have been uploaded with a large green box.

Add and work with Folders

To add a new folder simply click “Add Folder” and then on the box that appears give your folder a name.

Please note you cannot move folders around. The system is not designed to be like your computer’s own file storage system.

Editing & Deleting Files

editdelete

To delete a file, simply click on the cross next to the file (as shown above) you wish to delete and then confirm you wish to delete the file.

To edit a file, simply click on the little page symbol (as shown above).

From here you can then edit the following :-

  • Title/Name of the file
  • Filename (if you do change this, ensure you add the file extension to the end i.e. .docx or .pdf so that it displays like agenda.pdf)
  • Owner (we recommend this is left as is)
  • Folder which the file is in.

Ensure you click “Save” when you are done editing

Re-ordering Files (to take effect in widgets)

Within the files system you can also re-order the file listing so they appear in the correct order in any widgets or pages you use.

To do this, simply click on "Files" along the left hand side, click on the folder you want to re-order the files in it. Tick the "Allow Drag and Drop Re-ordering" tick box ( and then the list of files will come up for you to re-order. You can then simply drag the order of files into the order you want them.

draganddrop

Moving Files (from 1 folder to another)

The Silverstripe system is not really built for moving files between folders, however on a 1 by 1 basis it is possible.

To move a file from 1 folder to another, click on "Files" along the left hand side. Go into the folder where your file is stored, find the file and then click on it. 

Moving Files

From here click on the Folder drop down and then select the folder, from the list, that you want to move it to and click "Save" and then your file will have moved.


 

Managing Pages

To manage your pages, once you have logged in, click on Pages along the left hand side and then a view of your “page tree” will be shown (as per screenshot below)

Pages

From here you can do a number of things

  • Edit the order of pages
  • Add new pages
  • Edit the pages themselves

Editing Order of Pages

To edit the order of pages you simply hover your mouse over the page you want to move until a “hand” appears and then click and drag the page into the order you want it in. 

Click “Published” or “Save and Publish” when done to save the change. We recommend this is done when you have already selected a page. If you don’t select a page and re-order the pages then your changes won’t take effect.

Adding New Pages

To add a new page, click “Add New” and you will be greeted by a screen like the one below.

addpage

From here you can choose whether you want this to be a “top level” page i.e. one that appears in the main menu or “under a page” i.e. a sub page underneath another page. Select which one you wish to select. Once you have done this select the type of page you wish to create – generally speaking it will be a standard “Page” but more information on the other page types can be found later in this guide.

Once you have selected the type of page you want from the options, click “Create”. You will then be greeted by a screen like the one below. 

newpage

From here, you will need to give your page a “Page Name” and “Navigation Label”. These can be different if you so wish but automatically when you set the Page Name it completes the Navigation Label for you.

IMPORTANT - You will need to add a content area before you can start adding your text and images. To do this click the left hand box of this box that sits just below "URL Segment" and that looks like below to create a standard full page width content area.

 3columns

Once you have completed setting the page up how you want you can choose to either “Save” the page which will save it so you don’t lose your work but it won’t publish it to the live site.

To publish it to the live site you need to click “Save and Publish

If you want to subsequently delete the page then next to Save and Publish you will see a “more options” button. Click on this and click "Archive" and this will set the page to delete in due course.

If you want to subsequently un-publish a page that had previously been published then click the “more options” button and click “Unpublish”.

Please note, in this version of the One Suffolk Silverstripe software there is no delete page button. Archiving is your method of effectively deleting the page.

Editing Pages

To edit an existing page, simply click on "Pages" on the left hand side and then click on the page you wish to edit.

From here you should be greeted by a screen with your blue content area on the right hand side where you can edit the text, images, links etc and also change all the other various settings detailed in this guide.

Deleting Pages

To delete a page from your site, simply go to "More Options" at the bottom of your page and then click "Archive". Archive is delete in Silverstripe language.

Previewing a Site & Draft Pages

If you've made some substantial changes to a page, and wish to check exactly how it looks before making the changes live, you can save the changes to the Draft site and then preview it. 

To do this click the “Save Draft” button (shown below)

save draft button

Then click the mode toggle icon (shown below)

 view mode edit icon

Following that click the “Preview Mode”  button (shown below)

preview mode option

And then "Click on Draft site" (shown below)

Draftpublished

After you save your page as a draft, you can preview the page by clicking on "Preview mode" or "Split mode" in the side by side preview menu. (shown below). This will allow you to view a preview of your draft content alongside your editable form. That way you can make live updates to the draft site and see the preview immediately.

Preview Bar

Preview Mode – A full page view of your published or draft site as it appears.

Split Mode – A split mode where you can edit the text of that page and see the preview of what it looks like.

Edit Mode – A Full Page view of the editor.

Saving & Publishing

Saving & Publishing your page whenever you change something is one of the elements that has changed in the new One Suffolk software.

When you have finished editing a page you will simply see these options below.

saved

Even though it says the words "Saved" and "Published" or "Save as Publish" you still need to click one of the buttons to save your work. Whenever you change anything on the page make sure you click "Published" if you want to make the content go live on your site, or "Saved" if you want to view it on the "Draft" site first before publishing it.


 

Page Types

The One Suffolk Silverstripe software has a number of different type of page types. The vast majority of which you do not need to worry about as most get setup as standard when you have your One Suffolk site initially built.

  • Page – Standard content page – this is what you will be working with the vast majority of the time.
  • Asset Listing Page – A page type that allows you to show a list of files to users on the main part of the page. This is the same as the Asset listing widget except files are displayed in the page.
  • Classifieds Page – Set up as default in any site but doesn’t have to be used. Allows Classifieds Ad’s to be added to your site.
  • Error Page - Set up as default in any site but doesn’t have to be used.  Allows you to customise error pages within your site. For example you could customise an error page if a user tries to go to a page that doesn’t exist.
  • Events List Page - Set up as default in any site but doesn’t have to be used. Adds a page that lists the Events you have in your calendar.
  • Events Calendar Page - Set up as default in any site but doesn’t have to be used. Adds a page that lists the Events you have in your calendar.
  • Gallery Page – A page type that allows you to add an image gallery to your website
  • Mailchimp Landing Page - Set up as default in any site but doesn’t have to be used. A page type that allows users to link in with their Mailchimp mailing list
  • Posts Holder - Set up as default in any site but doesn’t have to be used.  It’s a page type that holds all your news items.
  • Redirector Page - It’s a page type that can redirect pages to another page – it is rarely used in One Suffolk websites.
  • Virtual Page - It’s a page type that can display content from another page– it is rarely used in One Suffolk websites.

The 3 page types that you will most likely have any dealings with will be the “Standard Page”, “Asset Listing Page” and “Image Gallery Page”. The rest of the page types can generally be ignored, however if you feel you could use them for something but are unsure how to use them then please contact us and we can help.

Earlier in this guide I have already shown you how to use the “Standard Page” type. In this section I will deal with how to use the other two main pages you may work with.

Gallery Page Type

To add an image gallery to your site (one that can be displayed on the main page), click “Pages” on the left hand side and then click “Add New”. From here choose whether you want the page to be a top level page or a sub page under another page by clicking the relevant option and then where it says “Choose Page Type” select “Gallery Page” and click “Create”. From here you will be greeted with a screen like the one on the next page.

 gallerypage1

 

On this page and specifically the “Content” tab, give your Gallery a proper Page Name & Navigation Label and the choose your images that you want in your image gallery from either your computer or from the File Store which will include all images that are already on the system. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click Open to upload them. If you want to upload multiple files at once then the new upgraded system allows you to do this. Simply click on the first item you want to upload, then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click "Open".

If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your image gallery and click “attach files”. You can also add multiple files at once in the File Store, simply click the first item you want to add then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click “attach files”.

Click “Save and Publish” when done.

Asset Listing Page Type

An Asset Listing Page is essentially a full page that lists a set of files that you wish to list -  either from a set of individual files of your choosing or listing all the files in a folder.

To add a Asset Listing page to your website, click “Pages” on the left hand side and then click “Add New”. From here choose whether you want the page to be a top level page or a sub page under another page by clicking the relevant option and then where it says “Choose Page Type” select “Asset Listing Page” and click “Create”. From the next screen give your new page a “Title” and “Navigation Label” in the relevant boxes under the “Content” tab.

Click the “Page Settings” tab and then you will be greeted with a screen like the one below.

pagesettingstab

From here, click on the “Media to show” dropdown and select  “Choose Assets to show” if you want to pick and choose your files or if you want to display all the files in a folder then choose the “All Assets in a folder” option and select the folder on your Files section which you want to use in the “Folder” box below. 

If you do want to pick and choose your files and you have set the “Choose Assets to show”  option then the bottom section of the page is where you add your files. You can either just add them from your computer or from your File Store.

If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click Open to upload them. If you want to upload multiple files at once then the new upgraded system allows you to do this. Simply click on the first item you want to upload, then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click Open.

If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your image gallery and click “attach files”. You can also add multiple files at once in the File Store, simply click the first item you want to add then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click “attach files”.

You can leave the section where it asks you about Widget Areas and Carousels unless you wish to have a widget section on your Asset Listing page or you wish to have some sort of slide show. Instructions on adding these are available in our Widgets, Carousels and Other Elements guide.

Click “Save and Publish” when done.


 

Content

Editing your content and adding text and images is a little different from the previous system and can still be done when creating the page or once you have created the page and you go back into it.

3columns

We have built extra flexibility into the new system and when creating a page you can choose whether the page is a Full Page, 2 equally sized columns page or a 2 differently sized column page. This means you can format your text in more innovative and different ways.

contentblock  

As you can see from the image above, the 3 buttons show these 3 options and you simply need to click on the option you would like. Once you have done this you can then click into the box and start adding your content (see screenshot below). 

contentblock2

The blue area is where you add the content, the toolbar just above it follows you however far you go down so it will always be visible from where you are typing.

The toolbar is fairly similar to the previous One Suffolk software so we won’t go into detail about what each and every option is on this.

The only thing that may be worth mentioning here is that we have given users more flexibility around fonts in this version of the software. You can now change font style and size if you wish – we do however recommend keeping these changes to a minimum as generally speaking website font styles and sizes should be consistent throughout a website.

Linking to other Websites

To insert a link to another website, click the “insert link” button (see below) 

 addlink

From here you will be greeted by a screen like on the one below.

insertlink

On the box, type in the Display text that you want your link to be. If the link is to a website link then leave the link type as “URL” and then type in the URL (website address) of the website you want to link to i.e. www.bbc.co.uk. If you wanted to insert a link to an email address then in the link type box you would need to select “email” from the dropdown and type in the email address you want to link to in the “email address” box. 

Linking to pages on your website

To insert a link to a page on your own website , click the “insert link” button (as above)

Click "Link to page on site

You will then be greeted by a screen like the one below.

pagesonyoursite2

Click on the Page you want to link to, type in the Display text that you want your link to be and then click "OK" to save the link.

Note: Pages that are “tabbed” below a page are classed as sub pages in this view.

Inserting Images (Preferred Method)

IMPORTANT NOTE: PLEASE ENSURE BEFORE FOLLOWING THIS INSTRUCTION YOU UPLOAD YOUR IMAGES INTO THE SYSTEM

insertimage1 

To insert an image into a page, click on the part of the page you want to insert the image too and then click on the “Insert Image” button on the toolbar (shown above). Once you have done this you will be greeted with a screen like the one below.

insertimage 

Click on “Browse Server” and then you will be greeted by a box which shows you all the images you have on the server. 

From here, select the image you want to insert and click “Ok”. Your image will then be inserted.

Inserting & Uploading Images in 1 process

Note – When you use this option you don’t get a choice of where to upload your image so your website files may become organised. If you want your files to remain organised then we recommend uploading the file first and then linking to it separately.

You can also upload a file and insert it into the page in 1 process. To do this click on the “Insert Image” button on the toolbar, click on the “Upload” tab and then you will be taken to a screen like the one below. 

insertupload

Click on “Choose File” and then a screen will open which will show your computer files. From here double click on the file you want to upload and click “Send it to the server” and then you will be greeted with a message to say your file has been uploaded. Once you have seen this message click the "Image Info" tab on the top of this box and then Click on “Browse Server” and then you will be greeted by a box which shows you all the images you have on the server. 

It is worth pointing out that on the left hand side of the screen shows the folders and then the right hand main side of the screen shows the files and images within the folders.

insertlinktoimage improved

From here, select the image you want to insert and click “Ok”. Your image will then be inserted.

There are plenty more things you can do with images before you click ok and insert it. You can set the width and height in the relevant boxes if you want to make it larger or smaller. If you change one of the height or width setting then the system should change the other one so it keeps it in proportionally. The height and width settings are in pixels so be aware of this when you are changing these settings. A larger image for example might have a width of 600 pixels or a thumbnail image 150 pixels.

You can also do things like change the alignment, for example you could make the image align on the right of the page rather than the left. To do this simply click the “Alignment” drop down arrow and select where you want it to align.

You could also choose to link your image to a website or webpage. To do this click on the Link tab on the screen I showed you on the previous page and then type in the website address in the URL box. Once you have amended any settings ensure you click “Ok

The other benefit of this version of the One Suffolk software is working with images once you have inserted them.  You can now simply click on the image in the editor and then a box like the one below will appear. From here you can then change sizes, alignments etc. 

Editingimage 

Deleting Images

If you want to delete an image you have already inserted then click on the image in the editor so it goes blue and click the “Delete” key on the keyboard.

Editing Images

Once you have your image in to the page then there are still a number of things you can do to your image to improve or change the display of them.

The key thing to look at is the sizing of the image, but there are also a number of other things you can change.

To edit an image that is shown on the page. Click on "Pages" down the left hand side, click on the page that you have added the image to and then right click on the image and click on "Image Properties".  On the box that comes up you will see see a "Width" and "Height" box, it is these boxes that you need to change to ensure the images are displayed in the way you want them to be. It is difficult in a guide like this to give you exact guidance on what numbers need to be in these boxes because it depends on what you want but a few bullet point hints are shown below.

  • If the original image that you loaded is small and of not great quality - you won't be able to increase the size of the images without making them looking even worse. Remember - you can always reduce the size of a large image without affecting quality but you can never increase the size of a small size image without affecting quality
  • Roughly speaking, the width of a One Suffolk web page is 800 pixels. If you want an image to fill the width of the page, set the width to 800 pixels.
  • If you want a mid sized image then set the width to between 400-500 pixels
  • If you want a small image then set the width to 200-250 pixels
  • If you want a portrait style image of a person set the width to 100-150 pixels

Please note, you don't really need to worry about the height. As soon as you change the width, the height will change with it.

To change the width of the image, simply overtype the number that is in the box and then click "Ok"

Make sure you click "Save and Publish" when you are done editing the image.

Inserting Links to Files (Preferred Method)

IMPORTANT NOTE: PLEASE ENSURE BEFORE FOLLOWING THIS INSTRUCTION YOU UPLOAD YOUR FILES INTO THE SYSTEM

 addlink

To insert links to files within a page, click on “Pages” down the left hand side. Click on the page you want to edit, make sure you are on the “Content” tab, click into the content area (the blue section) and then the toolbar will pop up. The content area or blue section looks like the image below.

contentblock

Click the “Insert Link” button (shown above) on the toolbar. You will then be greeted with a screen like the one below.

insertlinktofile 

From here type in some Display Text into the "Display Text field for what you want your link to be called (i.e. the name of the file perhaps) and then click “Link to File on Server" and then a screen with all of your images and files will be listed on your screen (Shown Below).

insertlinktoimage improved

On this screen images will be shown as a thumbnail version of the actual image that is listed on the server whilst Files will be shown as the relevant file icon depending on their type (i.e. pdf, word, excel etc). To link to the file of your choosing click on the file and then click “Ok”. Your file will then be linked in your main content.

Linking to a file and uploading in the same process

Note – When you use this option you don’t get a choice of where to upload your image so your website files may become organised. If you want your files to remain organised then we recommend uploading the file first and then linking to it separately.

You can also upload a file and insert it into the page in 1 process. To do this click on the “Insert Link” button on the toolbar, click on the “Upload” tab, click on “Choose File” and then a screen will open which will show your computer files. From here double click on the file you want to upload and click “Send it to the server” and then you will be greeted with a message to say your file has been uploaded. Once you have seen this message click the "Link Info" tab on the top of this box and then Click on “Browse Server” and then you will be greeted by a box which shows you all the files and images you have on the server. 

insertlinktoimage improved

It is worth pointing out that on the left hand side of the screen shows the folders and then the right hand main side of the screen shows the files and images within the folders. On this screen images will be shown as a thumbnail version of the actual image that is listed on the server whilst Files will be shown as the relevant file icon depending on their type (i.e. pdf, word, excel etc). 

To link to the file of your choosing double click on the file, put some relevant text into the “Display Text” box and then click “Ok”. Your file will then be linked in your main content.

Click “OK” and your file should be uploaded and inserted into your page.

Settings

Once you have your page setup as you like it, you can go back and change certain settings in regards to the page by clicking on “Settings” on the very top bar. Below are the settings you can change. (see screenshot below)

  • Top level or sub page
  • Show in menus
  • Show in search
  • Who can view the page
  • Who can edit the page

settings2

 

It should be fairly explanatory what these are but essentially :-

Top level or sub page – Choose whether you want your page to appear as a top level menu item as opposed to under one of these top level items.

Show in menus – You can have a page that doesn’t appear in any menu. Simply tick the box whether you want the page to appear in a menu.

Show in search – If you don’t want your page to appear in the site’s search system then simply untick this box. Leave it ticked if you do.

Who can view the page – You can allow only certain registered users the ability to view a page. Generally this setting should be left as it is but if you do want to use it then you will need to follow our Security & Users guide where we describe more about this.

Who can edit the page – You can allow only certain registered users the ability to edit the page. Generally this setting should be left as it is but if you do want to use it then you will need to follow our Security & Users guide where we describe more about this.

Page Settings

Page Settings allows you to do a number of things, the core elements worth bringing attention to is the ability to set a Carousel to display on a page and also the setting to set whether Widgets get displayed on a page or not. 

Once you have clicked on “Page Settings” you will see a screen like the one below. 

pagesettingsview

On every page there is not only a settings option (described above) but also a “Page Settings” option (see image below)

pagesettingsview2

This gives you a variety of options which are listed below with descriptions beside them of what they are.

Show Carousel – Tick this box if you want a carousel of images to be shown on your page. Generally only used on a home page.

Choose Carousel – Choose the Carousel you want shown. This will only display if you tick the box above. See our Widgets, Carousels… guide for information

Choose Widget Area – Allows you to display a list of widgets on any one page. See our Widgets, Carousels… guide for information on this.

Page Layout – Allows you to choose full page, sidebar right or sidebar left on any page. Generally used for widgets or extra navigation. Widgets will not be displayed if you do not choose sidebar left or right.

Hide Page Title – Will hide the page title in the coloured bar underneath navigation

Hide Breadcrumbs – Will hide the whole coloured bar underneath navigation.

Choose a Feature Image.- Displays an image in a set location on the page.


 

List of Shortcodes

If you would like to see what these shortcodes do and how they look please see our site here - http://os-demo.1sixty.co.uk/elements/shortcodes/

To add them to your website simply copy and paste the code into the blue content section and then tailor to how you want to display them.

Poll Shortcodes

Poll with multiple Answers

[Poll, id=1]

 

Poll with single options

[Poll, id=2]

 

Form Shortcode

With easy to use form builder

[FrontEndForm, id=2]

 

Testimonial Slider Shortcode

& easy to use testimonial management module

 

[Testimonials]

 

Testimonial Slider Shortcode

Easy to modify style and content

[alert, color=primary]This is an alert with the primary colour[/alert][alert, color=secondary]This is an alert with the secondary colour[/alert][alert, color=success]This is a success alert[/alert][alert, color=danger]This is a danger alert[/alert]

 

[alert, color=warning]This is a warning alert[/alert][alert, color=info]This is a info alert[/alert][alert, color=light]This is a light alert[/alert][alert, color=dark]This is a dark alert[/alert]

 

Badge Shortcode

[badge, color=primary, text='primary colour']
[badge, color=secondary, text='secondary colour']

 

Button Shortcode

Easy to change style and colour


[button, color=primary, text='Primary Colour', size=sm, link=http://onesuffolk.net]  [button, color=secondary, text='Secondary Colour', size=sm, link=http://onesuffolk.net]  [button, color=secondary, text='Small Size', size=sm, link=http://onesuffolk.net]  [button, color=secondary, text='Medium Size', size=md, link=http://onesuffolk.net]  [button, color=primary, text='Large Size', size=lg, link=http://onesuffolk.net]

 

Card Shortcode

Easily created with image, heading, text and link

[card, title='A Card Title', text='The Cards Text', btn_link='http://google.com', image='http://placehold.it/300x300']

[card, title='A Card Title', text='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.', image='http://placehold.it/300x300']

[card, title='A Card Title', text='The Cards Text', btn_link='http://google.com']

[card, title='A Card Title', text='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. ']

 

 

Dropdown Links Shortcode

{Same options as button are available}


[dropdown, text='Choose an option', link1="Google, http://google.com", link2="BBC, http://bbc.co.uk", link3="Facebook, https://twitter.com"]

 

Call to action Shortcode


[callout, title='A big callout Title',subtitle='A little Subtitle', text='A little bit of text to make it look good', btn_link=# ]

 

Styled List Shortcode

[list_group, item1='First Item in the list', item2='Second item in this list', item3='Third item in the list']

 

Modal/Popup Shortcode

 

[modal, title="THIS IS A MODAL"]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec condimentum dolor. Ut cursus molestie nisl, nec tincidunt lectus sollicitudin ut. Suspendisse potenti. Vivamus sem augue, pellentesque vel blandit nec, dictum a turpis. Quisque tincidunt orci euismod ultricies consectetur. Proin condimentum a eros eu cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur ligula ipsum, bibendum a pellentesque ut, tincidunt non mauris. Integer ut elementum ligula. Nulla facilisis lorem a varius pulvinar. Aliquam vel urna non tortor tempus sodales ut eget lorem.

[/modal]

 

Progress Bar Shortcode


[progress_bar, percentage=50]

[progress_bar, percentage=30]

[progress_bar, percentage=95]

[progress_bar, percentage=12]

 

Icons Shortcode

Can display any icon from Font Awesome

[icon, code="fa-glass"][icon, code="fa-music"][icon, code="fa-search"][icon, code="fa-envelope-o"][icon, code="fa-heart"][icon, code="fa-star"][icon, code="fa-star-o"][icon, code="fa-user"][icon, code="fa-film"][icon, code="fa-th-large"][icon, code="fa-th"][icon, code="fa-th-list"][icon, code="fa-check"][icon, code="fa-remove"][icon, code="fa-close"][icon, code="fa-times"][icon, code="fa-search-plus"][icon, code="fa-search-minus"][icon, code="fa-power-off"][icon, code="fa-signal"][icon, code="fa-gear"][icon, code="fa-cog"][icon, code="fa-trash-o"][icon, code="fa-home"][icon, code="fa-file-o"][icon, code="fa-clock-o"][icon, code="fa-road"][icon, code="fa-download"][icon, code="fa-arrow-circle-o-down"][icon, code="fa-arrow-circle-o-up"][icon, code="fa-inbox"][icon, code="fa-play-circle-o"][icon, code="fa-rotate-right"][icon, code="fa-repeat"][icon, code="fa-refresh"][icon, code="fa-list-alt"][icon, code="fa-lock"][icon, code="fa-flag"][icon, code="fa-headphones"][icon, code="fa-volume-off"][icon, code="fa-volume-down"][icon, code="fa-volume-up"][icon, code="fa-qrcode"][icon, code="fa-barcode"][icon, code="fa-tag"][icon, code="fa-tags"][icon, code="fa-book"][icon, code="fa-bookmark"][icon, code="fa-print"][icon, code="fa-camera"][icon, code="fa-font"][icon, code="fa-bold"][icon, code="fa-italic"][icon, code="fa-text-height"][icon, code="fa-text-width"][icon, code="fa-align-left"][icon, code="fa-align-center"][icon, code="fa-align-right"][icon, code="fa-align-justify"][icon, code="fa-list"][icon, code="fa-dedent"][icon, code="fa-outdent"][icon, code="fa-indent"][icon, code="fa-video-camera"][icon, code="fa-photo"][icon, code="fa-image"][icon, code="fa-picture-o"][icon, code="fa-pencil"][icon, code="fa-map-marker"][icon, code="fa-adjust"][icon, code="fa-tint"][icon, code="fa-edit"][icon, code="fa-pencil-square-o"][icon, code="fa-share-square-o"][icon, code="fa-check-square-o"][icon, code="fa-arrows"][icon, code="fa-step-backward"][icon, code="fa-fast-backward"][icon, code="fa-backward"][icon, code="fa-play"][icon, code="fa-pause"][icon, code="fa-stop"][icon, code="fa-forward"][icon, code="fa-fast-forward"][icon, code="fa-step-forward"][icon, code="fa-eject"][icon, code="fa-chevron-left"][icon, code="fa-chevron-right"][icon, code="fa-plus-circle"][icon, code="fa-minus-circle"][icon, code="fa-times-circle"][icon, code="fa-check-circle"][icon, code="fa-question-circle"][icon, code="fa-info-circle"][icon, code="fa-crosshairs"][icon, code="fa-times-circle-o"][icon, code="fa-check-circle-o"][icon, code="fa-ban"][icon, code="fa-arrow-left"][icon, code="fa-arrow-right"][icon, code="fa-arrow-up"][icon, code="fa-arrow-down"][icon, code="fa-mail-forward"][icon, code="fa-share"][icon, code="fa-expand"][icon, code="fa-compress"][icon, code="fa-plus"][icon, code="fa-minus"][icon, code="fa-asterisk"][icon, code="fa-exclamation-circle"][icon, code="fa-gift"][icon, code="fa-leaf"][icon, code="fa-fire"][icon, code="fa-eye"][icon, code="fa-eye-slash"][icon, code="fa-warning"][icon, code="fa-exclamation-triangle"][icon, code="fa-plane"][icon, code="fa-calendar"][icon, code="fa-random"][icon, code="fa-comment"][icon, code="fa-magnet"][icon, code="fa-chevron-up"][icon, code="fa-chevron-down"][icon, code="fa-retweet"][icon, code="fa-shopping-cart"][icon, code="fa-folder"][icon, code="fa-folder-open"][icon, code="fa-arrows-v"][icon, code="fa-arrows-h"][icon, code="fa-bar-chart-o"][icon, code="fa-bar-chart"][icon, code="fa-twitter-square"][icon, code="fa-facebook-square"][icon, code="fa-camera-retro"][icon, code="fa-key"][icon, code="fa-gears"][icon, code="fa-cogs"][icon, code="fa-comments"][icon, code="fa-thumbs-o-up"][icon, code="fa-thumbs-o-down"][icon, code="fa-star-half"][icon, code="fa-heart-o"][icon, code="fa-sign-out"][icon, code="fa-linkedin-square"][icon, code="fa-thumb-tack"][icon, code="fa-external-link"][icon, code="fa-sign-in"][icon, code="fa-trophy"][icon, code="fa-github-square"][icon, code="fa-upload"][icon, code="fa-lemon-o"][icon, code="fa-phone"][icon, code="fa-square-o"][icon, code="fa-bookmark-o"][icon, code="fa-phone-square"][icon, code="fa-twitter"][icon, code="fa-facebook-f"][icon, code="fa-facebook"][icon, code="fa-github"][icon, code="fa-unlock"][icon, code="fa-credit-card"][icon, code="fa-feed"][icon, code="fa-rss"][icon, code="fa-hdd-o"][icon, code="fa-bullhorn"][icon, code="fa-bell"][icon, code="fa-certificate"][icon, code="fa-hand-o-right"][icon, code="fa-hand-o-left"][icon, code="fa-hand-o-up"][icon, code="fa-hand-o-down"][icon, code="fa-arrow-circle-left"][icon, code="fa-arrow-circle-right"][icon, code="fa-arrow-circle-up"][icon, code="fa-arrow-circle-down"][icon, code="fa-globe"][icon, code="fa-wrench"][icon, code="fa-tasks"][icon, code="fa-filter"][icon, code="fa-briefcase"][icon, code="fa-arrows-alt"][icon, code="fa-group"][icon, code="fa-users"][icon, code="fa-chain"][icon, code="fa-link"][icon, code="fa-cloud"][icon, code="fa-flask"][icon, code="fa-cut"][icon, code="fa-scissors"][icon, code="fa-copy"][icon, code="fa-files-o"][icon, code="fa-paperclip"][icon, code="fa-save"][icon, code="fa-floppy-o"][icon, code="fa-square"][icon, code="fa-navicon"][icon, code="fa-reorder"][icon, code="fa-bars"][icon, code="fa-list-ul"][icon, code="fa-list-ol"][icon, code="fa-strikethrough"][icon, code="fa-underline"][icon, code="fa-table"][icon, code="fa-magic"][icon, code="fa-truck"][icon, code="fa-pinterest"][icon, code="fa-pinterest-square"][icon, code="fa-google-plus-square"][icon, code="fa-google-plus"][icon, code="fa-money"][icon, code="fa-caret-down"][icon, code="fa-caret-up"][icon, code="fa-caret-left"][icon, code="fa-caret-right"][icon, code="fa-columns"][icon, code="fa-unsorted"][icon, code="fa-sort"][icon, code="fa-sort-down"][icon, code="fa-sort-desc"][icon, code="fa-sort-up"][icon, code="fa-sort-asc"][icon, code="fa-envelope"][icon, code="fa-linkedin"][icon, code="fa-rotate-left"][icon, code="fa-undo"][icon, code="fa-legal"][icon, code="fa-gavel"][icon, code="fa-dashboard"][icon, code="fa-tachometer"][icon, code="fa-comment-o"][icon, code="fa-comments-o"][icon, code="fa-flash"][icon, code="fa-bolt"][icon, code="fa-sitemap"][icon, code="fa-umbrella"][icon, code="fa-paste"][icon, code="fa-clipboard"][icon, code="fa-lightbulb-o"][icon, code="fa-exchange"][icon, code="fa-cloud-download"][icon, code="fa-cloud-upload"][icon, code="fa-user-md"][icon, code="fa-stethoscope"][icon, code="fa-suitcase"][icon, code="fa-bell-o"][icon, code="fa-coffee"][icon, code="fa-cutlery"][icon, code="fa-file-text-o"][icon, code="fa-building-o"][icon, code="fa-hospital-o"][icon, code="fa-ambulance"][icon, code="fa-medkit"][icon, code="fa-fighter-jet"][icon, code="fa-beer"][icon, code="fa-h-square"][icon, code="fa-plus-square"][icon, code="fa-angle-double-left"][icon, code="fa-angle-double-right"][icon, code="fa-angle-double-up"][icon, code="fa-angle-double-down"][icon, code="fa-angle-left"][icon, code="fa-angle-right"][icon, code="fa-angle-up"][icon, code="fa-angle-down"][icon, code="fa-desktop"][icon, code="fa-laptop"][icon, code="fa-tablet"][icon, code="fa-mobile-phone"][icon, code="fa-mobile"][icon, code="fa-circle-o"][icon, code="fa-quote-left"][icon, code="fa-quote-right"][icon, code="fa-spinner"][icon, code="fa-circle"][icon, code="fa-mail-reply"][icon, code="fa-reply"][icon, code="fa-github-alt"][icon, code="fa-folder-o"][icon, code="fa-folder-open-o"][icon, code="fa-smile-o"][icon, code="fa-frown-o"][icon, code="fa-meh-o"][icon, code="fa-gamepad"][icon, code="fa-keyboard-o"][icon, code="fa-flag-o"][icon, code="fa-flag-checkered"][icon, code="fa-terminal"][icon, code="fa-code"][icon, code="fa-mail-reply-all"][icon, code="fa-reply-all"][icon, code="fa-star-half-empty"][icon, code="fa-star-half-full"][icon, code="fa-star-half-o"][icon, code="fa-location-arrow"][icon, code="fa-crop"][icon, code="fa-code-fork"][icon, code="fa-unlink"][icon, code="fa-chain-broken"][icon, code="fa-question"][icon, code="fa-info"][icon, code="fa-exclamation"][icon, code="fa-superscript"][icon, code="fa-subscript"][icon, code="fa-eraser"][icon, code="fa-puzzle-piece"][icon, code="fa-microphone"][icon, code="fa-microphone-slash"][icon, code="fa-shield"][icon, code="fa-calendar-o"][icon, code="fa-fire-extinguisher"][icon, code="fa-rocket"][icon, code="fa-maxcdn"][icon, code="fa-chevron-circle-left"][icon, code="fa-chevron-circle-right"][icon, code="fa-chevron-circle-up"][icon, code="fa-chevron-circle-down"][icon, code="fa-html5"][icon, code="fa-css3"][icon, code="fa-anchor"][icon, code="fa-unlock-alt"][icon, code="fa-bullseye"][icon, code="fa-ellipsis-h"][icon, code="fa-ellipsis-v"][icon, code="fa-rss-square"][icon, code="fa-play-circle"][icon, code="fa-ticket"][icon, code="fa-minus-square"][icon, code="fa-minus-square-o"][icon, code="fa-level-up"][icon, code="fa-level-down"][icon, code="fa-check-square"][icon, code="fa-pencil-square"][icon, code="fa-external-link-square"][icon, code="fa-share-square"][icon, code="fa-compass"][icon, code="fa-toggle-down"][icon, code="fa-caret-square-o-down"][icon, code="fa-toggle-up"][icon, code="fa-caret-square-o-up"][icon, code="fa-toggle-right"][icon, code="fa-caret-square-o-right"][icon, code="fa-euro"][icon, code="fa-eur"][icon, code="fa-gbp"][icon, code="fa-dollar"][icon, code="fa-usd"][icon, code="fa-rupee"][icon, code="fa-inr"][icon, code="fa-cny"][icon, code="fa-rmb"][icon, code="fa-yen"][icon, code="fa-jpy"][icon, code="fa-ruble"][icon, code="fa-rouble"][icon, code="fa-rub"][icon, code="fa-won"][icon, code="fa-krw"][icon, code="fa-bitcoin"][icon, code="fa-btc"][icon, code="fa-file"][icon, code="fa-file-text"][icon, code="fa-sort-alpha-asc"][icon, code="fa-sort-alpha-desc"][icon, code="fa-sort-amount-asc"][icon, code="fa-sort-amount-desc"][icon, code="fa-sort-numeric-asc"][icon, code="fa-sort-numeric-desc"][icon, code="fa-thumbs-up"][icon, code="fa-thumbs-down"][icon, code="fa-youtube-square"][icon, code="fa-youtube"][icon, code="fa-xing"][icon, code="fa-xing-square"][icon, code="fa-youtube-play"][icon, code="fa-dropbox"][icon, code="fa-stack-overflow"][icon, code="fa-instagram"][icon, code="fa-flickr"][icon, code="fa-adn"][icon, code="fa-bitbucket"][icon, code="fa-bitbucket-square"][icon, code="fa-tumblr"][icon, code="fa-tumblr-square"][icon, code="fa-long-arrow-down"][icon, code="fa-long-arrow-up"][icon, code="fa-long-arrow-left"][icon, code="fa-long-arrow-right"][icon, code="fa-apple"][icon, code="fa-windows"][icon, code="fa-android"][icon, code="fa-linux"][icon, code="fa-dribbble"][icon, code="fa-skype"][icon, code="fa-foursquare"][icon, code="fa-trello"][icon, code="fa-female"][icon, code="fa-male"][icon, code="fa-gittip"][icon, code="fa-gratipay"][icon, code="fa-sun-o"][icon, code="fa-moon-o"][icon, code="fa-archive"][icon, code="fa-bug"][icon, code="fa-vk"][icon, code="fa-weibo"][icon, code="fa-renren"][icon, code="fa-pagelines"][icon, code="fa-stack-exchange"][icon, code="fa-arrow-circle-o-right"][icon, code="fa-arrow-circle-o-left"][icon, code="fa-toggle-left"][icon, code="fa-caret-square-o-left"][icon, code="fa-dot-circle-o"][icon, code="fa-wheelchair"][icon, code="fa-vimeo-square"][icon, code="fa-turkish-lira"][icon, code="fa-try"][icon, code="fa-plus-square-o"][icon, code="fa-space-shuttle"][icon, code="fa-slack"][icon, code="fa-envelope-square"][icon, code="fa-wordpress"][icon, code="fa-openid"][icon, code="fa-institution"][icon, code="fa-bank"][icon, code="fa-university"][icon, code="fa-mortar-board"][icon, code="fa-graduation-cap"][icon, code="fa-yahoo"][icon, code="fa-google"][icon, code="fa-reddit"][icon, code="fa-reddit-square"][icon, code="fa-stumbleupon-circle"][icon, code="fa-stumbleupon"][icon, code="fa-delicious"][icon, code="fa-digg"][icon, code="fa-pied-piper"][icon, code="fa-pied-piper-alt"][icon, code="fa-drupal"][icon, code="fa-joomla"][icon, code="fa-language"][icon, code="fa-fax"][icon, code="fa-building"][icon, code="fa-child"][icon, code="fa-paw"][icon, code="fa-spoon"][icon, code="fa-cube"][icon, code="fa-cubes"][icon, code="fa-behance"][icon, code="fa-behance-square"][icon, code="fa-steam"][icon, code="fa-steam-square"][icon, code="fa-recycle"][icon, code="fa-automobile"][icon, code="fa-car"][icon, code="fa-cab"][icon, code="fa-taxi"][icon, code="fa-tree"][icon, code="fa-spotify"][icon, code="fa-deviantart"][icon, code="fa-soundcloud"][icon, code="fa-database"][icon, code="fa-file-pdf-o"][icon, code="fa-file-word-o"][icon, code="fa-file-excel-o"][icon, code="fa-file-powerpoint-o"][icon, code="fa-file-photo-o"][icon, code="fa-file-picture-o"][icon, code="fa-file-image-o"][icon, code="fa-file-zip-o"][icon, code="fa-file-archive-o"][icon, code="fa-file-sound-o"][icon, code="fa-file-audio-o"][icon, code="fa-file-movie-o"][icon, code="fa-file-video-o"][icon, code="fa-file-code-o"][icon, code="fa-vine"][icon, code="fa-codepen"][icon, code="fa-jsfiddle"][icon, code="fa-life-bouy"][icon, code="fa-life-buoy"][icon, code="fa-life-saver"][icon, code="fa-support"][icon, code="fa-life-ring"][icon, code="fa-circle-o-notch"][icon, code="fa-ra"][icon, code="fa-rebel"][icon, code="fa-ge"][icon, code="fa-empire"][icon, code="fa-git-square"][icon, code="fa-git"][icon, code="fa-y-combinator-square"][icon, code="fa-yc-square"][icon, code="fa-hacker-news"][icon, code="fa-tencent-weibo"][icon, code="fa-qq"][icon, code="fa-wechat"][icon, code="fa-weixin"][icon, code="fa-send"][icon, code="fa-paper-plane"][icon, code="fa-send-o"][icon, code="fa-paper-plane-o"][icon, code="fa-history"][icon, code="fa-circle-thin"][icon, code="fa-header"][icon, code="fa-paragraph"][icon, code="fa-sliders"][icon, code="fa-share-alt"][icon, code="fa-share-alt-square"][icon, code="fa-bomb"][icon, code="fa-soccer-ball-o"][icon, code="fa-futbol-o"][icon, code="fa-tty"][icon, code="fa-binoculars"][icon, code="fa-plug"][icon, code="fa-slideshare"][icon, code="fa-twitch"][icon, code="fa-yelp"][icon, code="fa-newspaper-o"][icon, code="fa-wifi"][icon, code="fa-calculator"][icon, code="fa-paypal"][icon, code="fa-google-wallet"][icon, code="fa-cc-visa"][icon, code="fa-cc-mastercard"][icon, code="fa-cc-discover"][icon, code="fa-cc-amex"][icon, code="fa-cc-paypal"][icon, code="fa-cc-stripe"][icon, code="fa-bell-slash"][icon, code="fa-bell-slash-o"][icon, code="fa-trash"][icon, code="fa-copyright"][icon, code="fa-at"][icon, code="fa-eyedropper"][icon, code="fa-paint-brush"][icon, code="fa-birthday-cake"][icon, code="fa-area-chart"][icon, code="fa-pie-chart"][icon, code="fa-line-chart"][icon, code="fa-lastfm"][icon, code="fa-lastfm-square"][icon, code="fa-toggle-off"][icon, code="fa-toggle-on"][icon, code="fa-bicycle"][icon, code="fa-bus"][icon, code="fa-ioxhost"][icon, code="fa-angellist"][icon, code="fa-cc"][icon, code="fa-shekel"][icon, code="fa-sheqel"][icon, code="fa-ils"][icon, code="fa-meanpath"][icon, code="fa-buysellads"][icon, code="fa-connectdevelop"][icon, code="fa-dashcube"][icon, code="fa-forumbee"][icon, code="fa-leanpub"][icon, code="fa-sellsy"][icon, code="fa-shirtsinbulk"][icon, code="fa-simplybuilt"][icon, code="fa-skyatlas"][icon, code="fa-cart-plus"][icon, code="fa-cart-arrow-down"][icon, code="fa-diamond"][icon, code="fa-ship"][icon, code="fa-user-secret"][icon, code="fa-motorcycle"][icon, code="fa-street-view"][icon, code="fa-heartbeat"][icon, code="fa-venus"][icon, code="fa-mars"][icon, code="fa-mercury"][icon, code="fa-intersex"][icon, code="fa-transgender"][icon, code="fa-transgender-alt"][icon, code="fa-venus-double"][icon, code="fa-mars-double"][icon, code="fa-venus-mars"][icon, code="fa-mars-stroke"][icon, code="fa-mars-stroke-v"][icon, code="fa-mars-stroke-h"][icon, code="fa-neuter"][icon, code="fa-genderless"][icon, code="fa-facebook-official"][icon, code="fa-pinterest-p"][icon, code="fa-whatsapp"][icon, code="fa-server"][icon, code="fa-user-plus"][icon, code="fa-user-times"][icon, code="fa-hotel"][icon, code="fa-bed"][icon, code="fa-viacoin"][icon, code="fa-train"][icon, code="fa-subway"][icon, code="fa-medium"][icon, code="fa-yc"][icon, code="fa-y-combinator"][icon, code="fa-optin-monster"][icon, code="fa-opencart"][icon, code="fa-expeditedssl"][icon, code="fa-battery-4"][icon, code="fa-battery-full"][icon, code="fa-battery-3"][icon, code="fa-battery-three-quarters"][icon, code="fa-battery-2"][icon, code="fa-battery-half"][icon, code="fa-battery-1"][icon, code="fa-battery-quarter"][icon, code="fa-battery-0"][icon, code="fa-battery-empty"][icon, code="fa-mouse-pointer"][icon, code="fa-i-cursor"][icon, code="fa-object-group"][icon, code="fa-object-ungroup"][icon, code="fa-sticky-note"][icon, code="fa-sticky-note-o"][icon, code="fa-cc-jcb"][icon, code="fa-cc-diners-club"][icon, code="fa-clone"][icon, code="fa-balance-scale"][icon, code="fa-hourglass-o"][icon, code="fa-hourglass-1"][icon, code="fa-hourglass-start"][icon, code="fa-hourglass-2"][icon, code="fa-hourglass-half"][icon, code="fa-hourglass-3"][icon, code="fa-hourglass-end"][icon, code="fa-hourglass"][icon, code="fa-hand-grab-o"][icon, code="fa-hand-rock-o"][icon, code="fa-hand-stop-o"][icon, code="fa-hand-paper-o"][icon, code="fa-hand-scissors-o"][icon, code="fa-hand-lizard-o"][icon, code="fa-hand-spock-o"][icon, code="fa-hand-pointer-o"][icon, code="fa-hand-peace-o"][icon, code="fa-trademark"][icon, code="fa-registered"][icon, code="fa-creative-commons"][icon, code="fa-gg"][icon, code="fa-gg-circle"][icon, code="fa-tripadvisor"][icon, code="fa-odnoklassniki"][icon, code="fa-odnoklassniki-square"][icon, code="fa-get-pocket"][icon, code="fa-wikipedia-w"][icon, code="fa-safari"][icon, code="fa-chrome"][icon, code="fa-firefox"][icon, code="fa-opera"][icon, code="fa-internet-explorer"][icon, code="fa-tv"][icon, code="fa-television"][icon, code="fa-contao"][icon, code="fa-500px"][icon, code="fa-amazon"][icon, code="fa-calendar-plus-o"][icon, code="fa-calendar-minus-o"][icon, code="fa-calendar-times-o"][icon, code="fa-calendar-check-o"][icon, code="fa-industry"][icon, code="fa-map-pin"][icon, code="fa-map-signs"][icon, code="fa-map-o"][icon, code="fa-map"][icon, code="fa-commenting"][icon, code="fa-commenting-o"][icon, code="fa-houzz"][icon, code="fa-vimeo"][icon, code="fa-black-tie"][icon, code="fa-fonticons"][icon, code="fa-reddit-alien"][icon, code="fa-edge"][icon, code="fa-credit-card-alt"][icon, code="fa-codiepie"][icon, code="fa-modx"][icon, code="fa-fort-awesome"][icon, code="fa-usb"][icon, code="fa-product-hunt"][icon, code="fa-mixcloud"][icon, code="fa-scribd"][icon, code="fa-pause-circle"][icon, code="fa-pause-circle-o"][icon, code="fa-stop-circle"][icon, code="fa-stop-circle-o"][icon, code="fa-shopping-bag"][icon, code="fa-shopping-basket"][icon, code="fa-hashtag"][icon, code="fa-bluetooth"][icon, code="fa-bluetooth-b"][icon, code="fa-percent"]