¿cómo cambiar el color del texto css?

Hola, estoy empezando a montar una web. Y querría saber como cambiar el color del texto "añadir producto" del siguiente código. ¿Alguien podría ayudarme?.

<div class="row">
<ul id="sellermenu" style="display:block;">
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="Añadir producto" href="https://www.url.com">
<i class="icon-plus fa fa-plus"></i>
<span>Añadir producto</span>
</a>
</li>
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="Productos" href="https://www.url.com">
<i class="icon-th-list fa fa-list"></i>
<span>Productos</span>
</a>

Gracias de antemano, un saludo.
Editado

hola puedes probar hacerlo seleccionando el primer span usando :first-child, te dejo un ejemplo:

<style>
.row span:first-child { 
	font-weight: bold; 
	color: red;
}
</style>

<div class="row">
	<span>Añadir producto</span>

	<span>Productos</span>	
</div>

demo

y esta es más precisa para tu código y no se suele ver mucho:

<style>
	.icon-plus + span {
		color: red;
	}
</style>

<div class="row">
	<ul id="sellermenu" style="display:block;">
		<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
			<a title="Añadir producto" href="https://www.url.com">
				<i class="icon-plus fa fa-plus"></i>
				<span>Añadir producto</span>
			</a>
			</li>
			<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
			<a title="Productos" href="https://www.url.com">
				<i class="icon-th-list fa fa-list"></i>
				<span>Productos</span>
			</a>
		</li>
	</ul>
</div>

demo

salu2 y bienvenido al foro!

Gracias por la contestación. He probado a ponerlos, pero ninguno me funciona. Se me cambia el texto de fuera, no el de lo que necesito cambiar.

Te copio el código completo

{hook h='displayMarketplaceHeader'}

<div class="row seller_menu_container">
<div class="col-lg-12">
<a class="btn btn-secondary open_seller_menu" href="#">
<span> <i class="icon-list fa fa-list"
></i> {l s='Menu' mod='jmarketplace'} </span>
</a>
</div>
</div>

<div class="row">
<ul id="sellermenu"{if isset($tpl_name) AND $tpl_name == 'selleraccount'} style="display:block;"{/if}>
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Add product' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'addproduct', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-plus fa fa-plus"></i>
<span> {l s='Add product' mod='jmarketplace'}</span>
</a>
</li>
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Products' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'sellerproducts', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-th-list fa fa-list"></i>
<span>{l s='Products' mod='jmarketplace'}</span>
</a>
</li>
{if $show_import_product == 1}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Import and export products' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'csvproducts', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-arrow-up fa fa-arrow-up"></i>
<span>{l s='Import and export products' mod='jmarketplace'}</span>
</a>
</li>
{/if}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='View my seller profile' mod='jmarketplace'}" href="{$seller_link|escape:'html':'UTF-8'}">
<i class="icon-user fa fa-user"></i>
<span>{l s='Seller profile' mod='jmarketplace'}</span>
</a>
</li>
{if $show_edit_seller_account == 1 }
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Edit your seller account' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'editseller', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-user fa fa-edit"></i>
<span>{l s='Edit seller account' mod='jmarketplace'}</span>
</a>
</li>
{/if}
{if $show_orders == 1}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='History commissions' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'sellerhistorycommissions', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-list-ol fa fa-list"></i>
<span>{l s='History commissions' mod='jmarketplace'}</span>
</a>
</li>
{/if}
{if $show_manage_orders == 1}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Manage Orders' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'orders', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-money fa fa-money"></i>
<span>{l s='Orders' mod='jmarketplace'}</span>
</a>
</li>
{/if}
{if $show_manage_carriers == 1}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Carriers and shipping cost' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'carriers', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-truck fa fa-truck"></i>
<span>{l s='Carriers' mod='jmarketplace'}</span>
</a>
</li>
{/if}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Payment' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'sellerpayment', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-credit-card fa fa-credit-card"></i>
<span>{l s='Payment' mod='jmarketplace'}</span>
</a>
</li>
{if $show_contact == 1}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Messages' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'sellermessages', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-envelope fa fa-envelope-o"></i>
<span>{l s='Messages' mod='jmarketplace'} ({$mesages_not_readed|intval})</span>
</a>
</li>
{/if}
{if $show_dashboard == 1}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Dashboard' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'dashboard', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-tachometer fa fa-tachometer"></i>
<span>{l s='Dashboard' mod='jmarketplace'}</span>
</a>
</li>
{/if}
{if $show_seller_invoice == 1}
<li class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
<a title="{l s='Withdraw money' mod='jmarketplace'}" href="{$link->getModuleLink('jmarketplace', 'sellerinvoice', array(), true)|escape:'html':'UTF-8'}">
<i class="icon-money fa fa-money"></i>
<span>{l s='Withdraw money' mod='jmarketplace'}<br/>(<strong>{$total_funds|escape:'html':'UTF-8'}</strong>)</span>
</a>
</li>
{/if}
{hook h='displayMarketplaceMenu'}
</ul>
</div>

{hook h='displayMarketplaceAfterMenu'}

Muchas gracias

buenas, este código no tengo manera de probarlo ya que parece prestashop o woocommerce etc, si quieres hacemos una cosa.. usa el segundo método que te pasé y haz una captura de la web en imagen para que vea lo que pasa.

me comentaste que se pone otro elemento de color rojo pero es raro por que ese código lo eh probado en bucle y veo esto:


recuerda recargar la cache del navegador para hacer la prueba

salu2

He conseguido cambiar el color muchas gracias. Añadí style="color: #d38219"; dentro del código <a>.
Gracias por las contestaciones.

de nada, claro de manera directa es muy sencillo agregarle un style="" pero el problema está en que si usas un CMS ecommerce cuando lo actualices ese ajuste se pierde por lo que los ficheros se reemplazan al hacer el update.

por eso estábamos haciendo mediante css ya que el ecommerce se actualiza pero el theme donde tienes el CSS no, pero bueno si de momento sales adelante de esa manera genial!

salu2!