Ustalenie własnych obrazków dla listy wypunktowanej

Pracuję nad prostą (statyczną) stronką do celów lokalnych (działać będzie tylko na localhost), w której dla niedużych detali używam pięciu kolorów - czerwonego, pomarańczowego, żółtego, zielonego i niebieskiego; Te kolory chciałbym także wykorzystać w listach wypunktowanych, do kolorowania kwadracików przy itemach; Z racji tej, że itemów listy może być dużo - kolejność kolorów chcę móc wybrać ręcznie;

Lista docelowo powinna wyglądać mniej więcej tak:

Aby to wykonać, przygotowałem sobie pliki grafik, które znajdują się w katalogu Images:

+ Help
  - index.htm
  + Global
    + Styles
      - formatting.css
    + Images
      - bullet_red.png
      - bullet_orange.png
      - bullet_yellow.png
      - bullet_green.png
      - bullet_blue.png

W pliku formatting.css mam poniższą definicję klas list wypunktowanych:

.bulletsList{
  list-style-type: none;
  margin: 24px 0px 24px 24px;
  padding: 0px;
}

.bulletsList li{
  list-style-type: none;
  padding-left: 16px;
  height: 18px;
}

.bulletRed{
  background: url('..\Images\bullet_red.png') no-repeat left top;
}

.bulletOrange{
  background: url('..\Images\bullet_orange.png') no-repeat left top;
}

.bulletYellow{
  background: url('..\Images\bullet_yellow.png') no-repeat left top;
}

.bulletGreen{
  background: url('..\Images\bullet_green.png') no-repeat left top;
}

.bulletBlue{
  background: url('..\Images\bullet_blue.png') no-repeat left top;
}

Natomiast plik index.htm linkuje sobie plik formatting.css oraz zawiera poniższą definicję listy:

<ul class="bulletsList">
  <li class="bulletRed">auris vel ex ultricies, eget accumsan felis</li>
  <li class="bulletOrange">euismod rutrum nisl laoreet</li>
  <li class="bulletYellow">turpis lorem, ullamcorper dictum interdum at, ornare nec risus</li>
  <li class="bulletGreen">suscipit vestibulum est et molestie</li>
  <li class="bulletBlue">lobortis turpis, a finibus neque</li>
</ul>

No i niestety, ale kolorowe kwadraciki nie pojawiają się przy pozycjach listy; Nie pojawiają się ani na starej Operze, ani na najnowszym Firefoxie, więc na pewno coś źle robię; Testowałem już mnóstwo rozwiązań znalezionych na stronach W3C i StackOverflow, jednak nadal nie mogę zmusić kodu do wyświetlania tych kwadratów...

Ktoś wie, co jest nie tak? Będę wdzięczny za pomoc;

Nie jestem fachowcem od webdevu, ale takie proste stronki klepało się dość łatwo; Wiem, że nie jest to mistrzostwo i nieco można ten kod ulepszyć, ale póki co chciałbym zobaczyć te kwadraty - później sobie ewentualnie zoptymalizuję style.

A moze w ten sposob https://jsfiddle.net/f17s3776/? To Ci pokrywa rowniez zagniezdzone list i dodatkowo nie musisz dla kazdego li osobno pisac.

ul.bulletsList {
  list-style: none;
}
ul.bulletsList li:before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 5px;
}

ul.bulletsList li:nth-child(5n+1):before {
    background: red;
}

ul.bulletsList li:nth-child(5n+2):before {
    background: orange;
}

ul.bulletsList li:nth-child(5n+3):before {
    background: yellow;
}

ul.bulletsList li:nth-child(5n+4):before {
    background: green;
}

ul.bulletsList li:nth-child(5n+5):before {
    background: blue;
}

A tak btw @furious programming, to czy ścieżka nie powinna mieć backslasha na Białystok zamiast na Szczecin? Jeżeli zmienisz ścieżkę, to śmiga :)

A moze w ten sposob https://jsfiddle.net/f17s3776/? To Ci pokrywa rowniez zagniezdzone list i dodatkowo nie musisz dla kazdego li osobno pisac.

Kombinowałem wcześniej z li:before, a nadając mu jakiś content i próbując kolorować znak kwadracika, ale nie wychodziło; Poza tym na każdej przeglądarce, wielkość znaku była inna;

Bardzo fajne rozwiązanie, ale wymaga małej poprawki, aby osiągnąć zamierzony efekt; Kolorów jest pięć i potrzebuję do każdego li dopisywać nazwę klasy, aby dla danego wiersza listy móc wybrać kolor, nie żeby był nadawany z automatu; Wystarczy mała przeróbka kodu i wszystko działa jak należy; Poniżej css:

ul.bulletsList{
  list-style: none;
  margin: 24px 0px 24px 16px;
  padding: 0px;
}

ul.bulletsList li{
  padding-left: 16px;
  height: 18px;
}

ul.bulletsList li:before{
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 8px;
}

li.bulletRed:before{
  background-color: #F45000;
}

li.bulletOrange:before{
  background-color: #F57000;
}

li.bulletYellow:before{
  background-color: #F0B500;
}

li.bulletGreen:before{
  background-color: #669D00;
}

li.bulletBlue:before{
  background-color: #366FCD;
}

i przykład definicji listy w pliku htm:

<ul class="bulletsList">
  <li class="bulletRed">auris vel ex ultricies, eget accumsan felis</li>
  <li class="bulletOrange">euismod rutrum nisl laoreet</li>
  <li class="bulletYellow">turpis lorem, ullamcorper dictum interdum at, ornare nec risus</li>
  <li class="bulletGreen">suscipit vestibulum est et molestie</li>
  <li class="bulletBlue">lobortis turpis, a finibus neque</li>
  <li class="bulletGreen">suscipit vestibulum est et molestie</li>
  <li class="bulletYellow">turpis lorem, ullamcorper dictum interdum at, ornare nec risus</li>
  <li class="bulletOrange">euismod rutrum nisl laoreet</li>
  <li class="bulletRed">auris vel ex ultricies, eget accumsan felis</li>
  <li class="bulletOrange">euismod rutrum nisl laoreet</li>
  <li class="bulletYellow">turpis lorem, ullamcorper dictum interdum at, ornare nec risus</li>
  <li class="bulletGreen">suscipit vestibulum est et molestie</li>
  <li class="bulletBlue">lobortis turpis, a finibus neque</li>
</ul>

Daje nam to poniższy efekt:

Kolory nie muszą być takie - mogą być np. pogrupowane (jak wpisy w logach), dlatego zależy mi na tym, aby samemu wybierać kolor dla każdego kwadracika;

A tak btw @furious programming, to czy ścieżka nie powinna mieć backslasha na Białystok zamiast na Szczecin? Jeżeli zmienisz ścieżkę, to śmiga :)

Zanim napisałem posta, sprawdziłem wszystko kilka razy - zarówno ukośniki (/, \), jak i znaki obejmujące ścieżkę (' i "), ale nic to nie zmieniało; Znak separatora ścieżek raczej nie ma znaczenia, dlatego że wszystkie testowane przeglądarki i tak go zmieniają na / (stara i nowa Opera, Firefox i IE); Dlatego jako ostateczność założyłem wątek, bo już nie miałem pomysłu na to co mogę jeszcze sprawdzić...

Przy okazji - na stronie są dwa obrazki (dwa loga), do których ścieżka wygląda tak samo, a mimo to grafiki są poprawnie ładowane i wyświetlane; Przykładowy zapis dla znacznika <img>:

<img id="projectLogo" src="Global\Images\project_logo.png" alt="project_logo.png"/>

Na wszystkich testowanych przeglądarkach obrazek jest ładowany, łącznie ze starą Operą i starym IE z Win7; Skoro takie ścieżki są dozwolone i dla innych elementów działają bez problemu, to widać coś innego było problemem;

W każdym razie bardzo dziękuję za pomoc - Twój sposób z li:before jest jak widać niezawodny :]