Help Css!

[Soumoss]

can someone help me to edit an html with css, it is only to put some icons and texts of a header in blue

Spoiler: HTML

<div class="container">
  <header class="header" id="vue-header">
    <nav class="navbar navbar-expand-lg navbar-dark" v-cloak>
      <img src="https://mosfy.cloud/mosfyn.svg" width="170" height="170" />
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-toggler01" aria-controls="navbar-toggler01" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
      <div class="collapse navbar-collapse" id="navbar-toggler01">
        <ul class="navbar-nav ml-auto mt-2 mt-lg-0" v-fade-until="settings.mayBeLoaded(&quot;isClient&quot;, &quot;isOpen&quot;, &quot;authenticatedUser&quot;)">
          <template v-if="settings.willBeContactable">
            <li class="nav-item"><a class="nav-link" v-bind:href="settings.customHomeUrl" v-if="settings.isOpen"><span><i class="far fa-home mr-2 fa-fw"></i></span><span> Home</span></a></li>
            <li class="nav-item" v-if="settings.isOpen"><a class="nav-link" v-if="settings.hasBilling &amp;&amp; settings.isClient" href="/manage"><span><i class="far fa-user-cog mr-2 fa-fw"></i></span><span>Client Area</span></a><a class="nav-link" v-else-if="!settings.authenticatedUser" href="/manage"><span><i class="far fa-door-open mr-2 fa-fw"></i></span><span> Sign In</span></a></li>
          </template>
          <li class="nav-item" v-if="settings.authenticatedUser"><a class="nav-link" href="/support-database" v-if="brand &amp;&amp; brand.supportDb &amp;&amp; !settings.canCreateCustomerSupportTicket"><span><i class="far fa-question-circle mr-2 fa-fw"></i></span><span>Support Database</span></a></li>
          <li class="nav-item  dropdown" v-if="settings.authenticatedUser &amp;&amp; settings.canCreateCustomerSupportTicket"><a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Help Desk</span><span class="badge badge-pill bg-light text-dark ml-1">{{ settings.ticketCount }}</span></a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="/customer-support/create-new"><span><i class="far fa-ticket mr-2 fa-fw"></i></span><span>New Ticket</span></a>
              <div class="dropdown-divider"></div><a class="dropdown-item" href="/customer-support"><span><i class="far fa-eye mr-2 fa-fw"></i></span><span>View Tickets</span></a>
              <div class="dropdown-divider" v-if="brand &amp;&amp; brand.supportDb"></div><a class="dropdown-item" href="/support-database" v-if="brand &amp;&amp; brand.supportDb"><span><i class="far fa-question-circle mr-2 fa-fw"></i></span><span>Support Database</span></a>
            </div>
          </li>
          <li class="nav-item" v-if="settings.authenticatedUser &amp;&amp; brand &amp;&amp; brand.togglePrefs &amp;&amp; brand.togglePrefs.contactForm"><a class="nav-link" href="/contact"><span><i class="far fa-comments mr-2 fa-fw"></i></span><span>Contact</span></a></li>
        </ul>
        <ul class="navbar-nav mt-2 mt-lg-0" v-fade-until="settings.mayBeLoaded(&quot;isClient&quot;, &quot;isOpen&quot;, &quot;authenticatedUser&quot;)">
          <li class="nav-item dropdown" v-show="settings.authenticatedUser"><a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span style="color: #00a3e8">Account</a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"><a class="dropdown-item" id="masterFTPlink" style="display:none;" href="/account/master-ftp"><span><i class="far fa-file-upload mr-2 fa-fw"></i></span><span>Master FTP</span></a><a class="dropdown-item" href="/account/billing-details" v-if="settings.isOpen &amp;&amp; settings.canBuy &amp;&amp; settings.supportsStoredPayments"><span><i class="far fa-credit-card mr-2 fa-fw"></i></span><span>Payment Methods</span></a><a class="dropdown-item" href="/account/renewals" v-if="settings.isOpen &amp;&amp; settings.canBuy"><span><i class="far fa-calendar mr-2 fa-fw"></i></span><span>Renewals</span></a><a class="dropdown-item" href="/account/security-details"><span><i class="far fa-lock-alt mr-2 fa-fw"></i></span><span>Security Details</span></a><a class="dropdown-item" v-if="settings.canUpdateContact" href="/account/contact-details"><span><i class="far fa-envelope mr-2 fa-fw"></i></span><span>Contact Details</span></a>
              <div class="dropdown-divider"></div><a class="dropdown-item" id="log-me-out-v-controlled" href="#!" @click.prevent="logout()"><span><i class="far fa-power-off mr-2"></i></span><span>Sign Out</span></a>
            </div>
          </li>
          <span style="color: #00a3e8"><li class="nav-item" v-if="settings.isOpen &amp;&amp; settings.canBuy"><a class="nav-link" id="basket-link" href="#" v-on:click.prevent="shoppingBasket()"><span><i class="far fa-shopping-basket mr-2 fa-fw"></i></span> <span style="color: #00a3e8"> Cart<span class="badge badge-pill badge-light text-dark ml-2">{{ basketItemCount || 0 }}</span></a><span style="color: #00a3e8"></li>
        </ul>
      </div>
      <div class="shopping-basket" id="shopping-basket" style="display: none;">
        <div class="shopping-basket-header" v-if="settings.config &amp;&amp; settings.canBuy"><span><i class="far fa-shopping-basket mr-2"></i></span>Cart<span class="badge badge-pill badge-light text-dark ml-2">{{ basketItemCount || 0 }}</span>
          <div class="shopping-basket-total"><span class="text-muted">Total:&nbsp;</span><span>{{ catalogue.price(basket.total_excluding_vat || 0) }}</span></div>
        </div>
        <p class="card-text mt-3" v-if="!(basket.itemsFlat &amp;&amp; basket.itemsFlat.length)">There are currently no items in your cart. Browse our <a href="/">services</a> or search for a <a href="/domain-search">domain name</a>.</p>
        <ul class="shopping-basket-items" v-if="settings.config &amp;&amp; settings.canBuy">
          <li class="clearfix" v-for="basketItem in basket.itemsFlat"><span class="item-name" style="word-break: break-all;">{{ basketItem.label }}</span><span class="item-price">
              <div class="reduced d-inline-block" v-if="basketItem.expectedCharges.quotedPriceFull &lt; basketItem.expectedCharges.originalQuotedPriceFull">
                <strike>{{ catalogue.price( basketItem.expectedCharges.originalQuotedPriceFull - basketItem.expectedCharges.originalQuotedVat) }}</strike>&nbsp;
              </div><span>{{ catalogue.price(basketItem.expectedCharges.quotedPriceFull - basketItem.expectedCharges.quotedVat) }}</span></span><span class="item-quantity">Qty: 1</span><a class="item-remove float-right" href="#" v-on:click="basket.removeItem(basketItem)">Remove <i class="far fa-trash ml-1"></i></a></li>
        </ul><a class="btn btn-primary btn-sm d-block mb-3" href="/checkout">View Cart</a>
      </div>
    </nav>
  </header>
</div>

 

[ShelShock]

What are you needing?

 

[ShelShock]

Can you draw out an example of what you want it to look like?

 

[Soumoss]

Can you draw out an example of what you want it to look like?

Sure! Thanks

 

[ShelShock]

This looks like you already have a style sheet made?

 

[Soumoss]

This looks like you already have a style sheet made?

I'm not sure , but the HTML you put in is what gives it the style, for example the cart is blue after adding a color code