goatleg | CSS Hacks

CSS

Cascading Style Sheets (or CSS for short) are a common way to format web pages. While Bricklink strips out many of the tags used in CSS, it is possible to link to CSS files and use them in a limited way to make your Bricklink-hosted pages more attractive.

For more information on CSS, try this CSS Tutorial. There are numerous other CSS resources on the web. Bear in mind that many of the features will not work on Bricklink, so some trial and error may be necessary to get the results you want.

Include Font Awesome Icons in your Pages

Bricklink makes use of a free icon hosting service called Font Awesome that allows you to insert icons in your pages. Here are some examples:

Insert icons for emphasis

Please be aware your home country may impose import duties on your purchase.

Use icons in lists

Great Selection
Quick Service
Rocketships

Use icons as links

Home

Instructions

1. The first step is to insert a link to the Font Awesome stylesheet into the page where you want to use the icons. Select the link text below and copy it to your clipboard.

2. Next, go to your Bricklink page where you want to use the icon and paste the link text at the top of the text entry box. For example, here is the page to enter your store terms:

3. Next, visit the Font Awesome website and choose an icon to use. Make note of the name of the icon.

4. Insert the code below where you want the icon to appear inserting the name of the icon where it says ICON_NAME.

For this example we'll use the icon called warning. Paste the text where you want the icon to appear:

5. Click the Submit Changes button and view your page for any format issues.

Using icons as list bullets To create an unordered list using icons for bullets, such as the one below, copy the code and alter it with the icon names and list contents:

Great Selection
Quick Service
Rocketships

<ul class="fa-ul"> <li><div class="fa-li fa fa-hand-o-right"></div>Great Selection</li> <li><div class="fa-li fa fa-hand-o-right"></div>Quick Service</li> <li><div class="fa-li fa fa-rocket"></div>Rocketships</li> </ul>

Where you can use CSS

There are several places where you can use CSS on your Bricklink-hosted pages:

On your splash page
On your terms page
On your About Me page

Icons can be resized, stacked and formatted using common HTML.
You can even make them spin.

Please do not make them spin.

For more examples, visit Font Awesome.

Note: The Font Awesome examples direct you to use the i or span tags to include icons. These will be stripped by Bricklink! Instead, substitute the div tag.