GuidesDiscussionSupport us!v2

You will see how to add assets to your website: images, stylesheets, javascripts and fonts. These are different from the assets that end-users will upload from the back-office.

## Images

Let's say you want to add logo.jpg on your index page. Add logo.jpg to **public/images**.

Using <img src="/images/logo.jpg" /> will work when using the Wagon webserver,

but it won't in LocomotiveCMS after deploying to your site. Liquid filters are used to get public urls (images, javascripts, stylesheets...). Moreover, the filters are in charge of putting the right checksum at the end of the url which is needed in case you put a CDN in front of your assets. So use `theme_image_url`.

In your page, add:


Note that your image path is simpler, you don't need to specify the "image" folder. Still, you can create subfolders: **public/images/icons/ajax-loader.gif**
will be refered this way:

In your stylesheets, images paths in the url() function will be automatically changed to the theme image url.
The theme_image_tag can also be used to generate the html img tag:

## Javascripts
Put your javascripts in the **public/javascripts** folder then use the `javascript_tag`:

You can also use the `javascript_url` tag.
## Stylesheets
Put your stylesheets in the **public/stylesheets** folder then use the `stylesheet_tag`:

You can also use the `stylesheet_url` tag.
Wagon automatically understands the Sass language to manage your stylesheets.
In the **public/stylesheets/** folder, you can write `.scss` and `.sass` files. It will be automatically compiled to css when developing, and automatically pushed to a Locomotive Engine when deploying.
The `wagon deploy` task will precompile and push only the files not beginning with an underscore (`_`), so prefix with `_` the SASS partials that you `@include`.
## All CSS can be vendor prefixed by autoprefixer
When enabled, [autoprefixer](🔗) automatically takes care of the vendor prefixing in your CSS (SCSS or SASS) files. When deploying you wagon site to the engine it will run Autoprefixer. So no more worrying about different browser mismatches.
To enable it, just create the following configuration file:

Autoprefixer may slow down the css compression in development, you can use NodeJS for the JS engine to make it faster :

## Fonts
Put your fonts in the **public/fonts** folder. Call them directly in your css.
However, if you host your website on Heroku / Amazon S3, you need to do the following steps to make it work.
  • Store all your fonts in the **public/fonts** folder
  • Create a **public/fonts/all.css** and declare your fonts in it
  • Load your **fonts/all.css**

## Learn more
  • [theme_image_tag](🔗) and [theme_image_url](🔗) documentation
  • [javascript_tag](🔗) and [javascript_url](🔗) documentation
  • [stylesheet_tag](🔗) and [stylesheet_url](🔗) documentation