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”
Within this version of the One Suffolk Silverstripe software there are a number of different options available to you to customise how this might look. Most of this will have already been described in our other guides but we wanted to put this in 1 document for you as the Home Page is so important.
To add a carousel click on “Elements” down the left hand side and then on the “Elements” page click on “Carousels” along the top and then it will take you to a page which lists any Carousels you may have. From here click “Add Carousel”.
Give your Carousel a Title by typing into the “Title” box. Set whether you want your Carousel to move your slides in standard slideshow mode or whether you want them to fade out by selecting the appropriate option on the “Slide Animation” dropdown and also set a time in milliseconds in which you want the slides to change (transition) by typing in a figure in the “Slide Transition” box. We recommending using the figure 6000 which is 6 seconds but you have freedom to change this to whatever – just remember this figure is in milliseconds.
We also recommend you select the “Show Slide Controls” and the “Show Slide Indicator” tick boxes as this will allow the user to move through your Carousel at their own pace if they wish. Once you have done all of this click “Create”. Once you have done this a new section will be added to your screen giving you the ability to add your slides. To do this click “Add Slide”.
On this screen, if you want text to overlay your image then type something into the “Title” and “Slide Text” boxes. If you don’t want text to overlay it then leave it blank. Likewise if you want your slide to link to another website or page on your website then type text into the “Link/Button Text” and “Link Button URL” fields. Please note on the Link Button URL field you will need to enter the full website address to link to i.e. http://www.bbc.co.uk. You can even set whether you want the slide text aligned either left or centre within the slide by choosing the appropriate option on the “Slider Text Alignment” dropdown.
The final element of this is to add your image. Choose whether you want to upload a new image from your computer or from the 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 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 carousel and click “attach files”.
Once you have done all this click “Create”
The final stage in this process is to actually set the Carousel to show on your page.
To do this click “Pages” along the left hand side, click on your Home Page (for example), click on “Page Settings”, ensure you click “Show Carousel” and then underneath that option select the Carousel you want to show by using the “Choose a Carousel” dropdown. Click “Save and Publish” when done.
In the new One Suffolk Silverstripe software it is now far easier to create front page boxes that you can display on your home page site. Before you would have needed to know extensive HTML coding knowledge and even then formatting it would not have been easier. Now you can use all the facilities of the editor and a “shortcode” and then you can start using them.
Firstly, click on “Pages” on the left hand side and then select the “Home Page” from the list. Once you can see all your content you will need to use one of these 3 buttons below to create a new content area on your page for these boxes to go. Whether you are simply setting up 2 boxes or 6 I’d recommend using the left hand side option which is a 1 column content area.
Once you click on this a blue content area will be created. (like below)
The next step is to minimise the size of the box so that further boxes can be added alongside it. We recommend not to create 3 boxes in any one “row”.
For example, if you wanted 6 boxes to be shown on your home page then we recommend creating 2 rows of 3.
If you just want 3 boxes to be shown then 1 row will be fine. To create the 3 boxes you need to use the – symbol shown in this image below.
Keep clicking it until the box has been reduced to a point you think you could fit 3 of them in. Once you are content then click the "+ symbol" (inside a blue circle).
When you do this a new content area is created alongside the content area you created previously. Once again, change the size of the box using the + or – symbol until you think you reach a point where you could fit a third box. Once you have re-sized the box you can then complete the same process again and add your third box until all the boxes fit on 1 row together.
Click “Save and Publish” when done.
Once that is in place you then need to add the shortcode (shown below) that will display the 3 boxes in a nice format.
[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']
And then go to your Home Page, find the 3 column content area box you set up in the previous setup and paste this code replacing any text in the box.
Click “Save and Publish” when done.
You will notice now that you have 3 nicely formatted boxes on your front page. All that remains you to do is to edit the text and insert any image (if you have one).
To do this, all you need to do is on your Home Page, where you now have the 3 blue content area boxes with the code below in them all, is to edit the text after the words text=‘ and before the end speechmark before the image coding (essentially the text between the speechmarks).
If you want to change the image then simply copy and paste the full website address of the image you want and again insert it between the speechmarks after the image= text.
Once you have done this click “Save and Publish”.
Widgets are a nice way of making your home page a little more appealing.
Widgets only work in side bars. If you do not set a page to have a sidebar in the “Page Settings” tab (which was detailed in our Pages guide) then widgets will not appear.
Widgets are set in what we call “Widget Areas”. These are groupings of 1 or more widgets that will get displayed together. Currently as standard there are 4 Widget Areas. They are “Default Widget Area”, “Blog Widget Area”, “Events Widget Area” and “Classifieds Widget Area”.
Essentially “Blog Widget Area”, “Events Widget Area” and “Classifieds Widget Area” are designed for their specific sections on the website i.e. News, Events or Classifieds and should be kept to them, while the “Default Widget Area” can be used anywhere on the site. Soon we hope to have the ability to add your own Widget Areas which means you will be able to have even more flexibility.
To add a widget to any of the widget areas click on “Elements” down the left hand side and then on the “Elements” page click on “Widget Areas” along the top and then you will see a screen like the one below.
Here are listed the 4 widget areas I described earlier. To add or remove widgets to these simply click on the one you wish to edit and then you will see any widgets you have in your widget area. To add a new one click “Add Widget”.
From here you need to give your Widget a name in the “Widget Heading” box and then if you want for the website to show this name select the “Show Widget Heading” box. If you want the widget to actually work then you will also need to tick the “Active Widget” box.
The final thing you need to is choose the widget you want to add to the widget area by clicking on the “Choose Field Type” dropdown and selecting the one from the list.
For example a Twitter widget might be a nice thing to have on your home page so to add this select the Twitter Widget from the list and then click “Save”.
The Twitter widget is an example of a widget that does require some additional setup. Firstly you need to go to “Services” along the left hand side, click the “Twitter” tab along the top and then click “Add Twitter Feed”. Give your feed a title and insert the twitter name i.e. the bit after the @symbol in your twitter name into the “TwitterID” box and then click “Create”
Once you have done this you will need to go back to your Widget Area and then click on the Twitter widget and choose the feed that you just set up on the “Choose Feed” dropdown. Click “Save” when done.
Clearly you could add one of a number of widgets to your site but this is an example of one.
The Title and Breadcrumbs is essentially the coloured bar that you see either above your carousel or below it. The bar colour can be set to whatever you like and more information will be given on this in the next part of the guide.
The title is defined as the large text on the left hand side whilst the breadcrumbs is the small text on the right hand side which denotes your place in the site. This is particularly useful if you have many sub pages off a main page and users can easily see where they are on the site.
On the home page (and indeed on any page) you can turn off the Title or Breadcrumbs – if you turn off both then it removes the bar totally.
To do this click on “Pages” on the left hand side, click on “Home”, click on “Page Settings” on the sub menu bar and tick either the “Hide Breadcrumbs” or “Hide Page Title” tick boxes (or both if desired). Click “Published”
Within your One Suffolk website there are a couple of ways of changing the colours it uses.
You can change the primary and secondary colour that is used on the Breadcrumbs and Title bar and also throughout the rest of the site. You have complete control over these colours so you can pick whatever shade or colour you would like. You can also change the Header and Footer style to be either light or dark.
The reason why you only can change the Header and Footer style to be either light or dark is for accessibility reasons. We want to ensure that users when they view your site can view your navigation bar and footer and this is one of the few ways this can be achieved.
To change colours click on “Settings” on the main left hand menu bar then click on “Theme Options” along the top tabs. You will be greeted by a screen like the one below.
In the “Make it Yours” section you will see 2 coloured bars for the primary and secondary colour. To change these simply click on the colour square on the left hand side and then a colour picker like the one shown below will appear.
Using the colour picker simply drag the circular pointer (with your mouse) to the colour you wish to use. To the right hand side of the colour square where you use the colour picker there is a also a slider which you can move up and down which changes the colours you could potentially use. The colour picker shows a range of shades within a certain range but with the slider you get the whole range of colours in the rainbow available to you.
Click “Save” when done.
If you want to change the Header and Footer Colour then simply click on the “Header and Footer style” and choose either Dark or Light. What this will do is when you use the Dark option it will make the Header and Footer bars a dark colour with light text and if you use the Light option it will make the Header and Footer a light colour but with dark text.
Click “Save” when done.
Within your footer you can add text to your footer and you can also add links.
If you want to text to your footer simply type it into the “Footer Copyright text” box
Click “Save” when done.
If you want to add links to your footer. Simply add them to the “Footer Links” section. Click on the + symbol and then in the “Link” box type in the full website address of the website you want to link to and in the “Text” box type in the text of the link that you want to appear in your footer. To delete them simply click the cross symbol.
Click “Save” when done.
You can add a small logo to your site – this will appear in the top left hand corner of your website.
To do this look in the “Logo” section of the “Theme Options” page under “Settings”. You can then either upload a new file from your computer or choose a file from the File Store.
If you want to upload one 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 it.
If you want to pick a file 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 the Image you want to add as your logo and click “attach files”.
Please be aware that a logo is designed to be small so we recommend using a properly designed logo to fit in this space.
Click “Save” when done.
In this new version of the One Suffolk Silverstripe software you can also add testimonials to your home page.
There are 2 parts to this process. Firstly you need to create the testimonials then you need to add the content area to your Home Page so that it appears.
Creating the Testimonials
Click on Testimonials on the left hand side main menu bar and then a screen will show you all the testimonials you have setup. To add one click “Add Testimonial” and then fill in the “Full Name” and “Text” boxes with the information you require.
Click “Create” when done.
Adding Testimonials to the Home Page
To add a Testimonial section to your home page. Click on “Pages” on the main left hand side menu bar, click on “Home”
From here you need to create a new “Content area” section on the page using the set of icons below.
Use the + symbol on the left hand one of these (this is the 1 column option) and then this will add a new content area section to your page (like below)
In the blue text section area, replace any latin default text with the code below
[Testimonials]
Click “Published” when you are finished and then your home page will now display all of your testimonials listed in your Testimonials section.
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"]