Solved: FontAwesome Symbols

[jleesaxon]

The cartblock module uses a ":before" css tag with a "content" definition:

 

.shopping_cart > a:first-child:before {

   content: "\f07a";

   display: inline-block;

   font-family: "FontAwesome";

 

However, this doesn't allow the icon to be repositioned like I need. I need it to be its own element. I've tried two methods (see below) unsuccessfully. Any suggestions? Is making a transparent .gif of the icon my only option?

 

HTML:

<div id="cart_icon">\f07a</div>

 

CSS:

#cart_icon {

   background-color: black;

   font-family: "FontAwesome";

   height: 25px;

   width: 25px; }

HTML:

<div id="cart_icon">&nbsp</div>

 

CSS:

#cart_icon {

   background-color: black;

   content: "\f07a";

   font-family: "FontAwesome";

   height: 25px;

   width: 25px; }

Edited May 30, 2014 by jleesaxon (see edit history)

[vekia]

hello

last method should work

do you checked page source if your code appears there?

it can be related to caching

[CartExpert.net]

Hi.

 

You can try this method:

<i class="icon-cogs icon-2x icon-light"></i>

 

Regards.

Robin.

The CartExpert Team

[jleesaxon]

Okay, so I looked at the tags from CartExpert's suggestion and figured out that these icons will not work without the ":before" (or ":after"). I have no idea why this is, but for anyone having the same problem here's the proper code:

 

 

HTML:
<div id="cart_icon"></div>
 
CSS:
#cart_icon:before {
   background-color: black;
   content: "\f07a";
   font-family: "FontAwesome"; }

 

and, if you've deleted the default global.css, you'll also need this somewhere:

 

 

@font-face {
  font-family: 'FontAwesome';
  src: url("../font/fontawesome-webfont.eot?v=3.2.1");
  src: url("../font/fontawesome-webfont.eot?#iefix&v=3.2.1") format("embedded-opentype"), url("../font/fontawesome-webfont.woff?v=3.2.1") format("woff"), url("../font/fontawesome-webfont.ttf?v=3.2.1") format("truetype"), url("../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1") format("svg"); }

[CartExpert.net]

Hi.

 

The icons work without the :before and :after. But the font file must be included.

 

Regards.

Robin.

The CartExpert Team