CSS Shield icon

  • (2 Pages)
  • +
  • 1
  • 2

15 Replies - 786 Views - Last Post: 25 November 2015 - 12:22 PM

#1 Lightme  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 06-March 10

CSS Shield icon

Posted 24 November 2015 - 09:52 AM

I am struggling to get a pretty simple task done.

On this website: http://www.vijver-expert.nl/ (is in Dutch)

You see a icon in the header like a checklist of why to use their shop with a shield/check icon in front

The content to load this is:

"\e82c"


And I am guessing it is Fontello, I uploaded the Font folder to the root of Fontello and put this in the CSS stylesheet:

@font-face {
  font-family: 'fontello';
  src: url('/font/fontello.eot');
  src: url('/font/fontello.eot') format('embedded-opentype'),
       url('/font/fontello.woff') format('woff'),
       url('/font/fontello.ttf') format('truetype'),
       url('/font/fontello.svg#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}


At the top, and following is at the bottom:

.inner {
    border: 1px solid #e7e7e7;
    border-radius: 2px;
    width: auto;
    background: #f6f6f6;
    margin: 0 auto;
}

.inner ul {
    display: flex;
    padding: 0 0 0 20px;
    height: 50px;
    flex-flow: row wrap;
}

.inner li {
    display: flex;
    flex-flow: row wrap;
    flex: 1 1 auto;
    text-align: right;
    display: inline-block;
    position: relative;
    line-height: 50px;
    padding-right: 20px;
    white-space: nowrap;
}

.inner ul li i.icon-shield {
    top: 1px;
    margin-right: .5em;
    color: #009fe1;
    font-size: 18px;
    text-align: center;
}

i.icon-shield {
    text-align: right;
    width: auto;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'fontello';
    font-style: normal;
    font-weight: normal;
    line-height: 1em;
    display: inline-block;
}

.inner ul li i:before {
    position: relative;
    left: 0;
    margin: 0;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
}

.icon-shield:before {
    content: '\e82c';
}



Problem I am facing is that I get a different symbol like 2 crosses next to each other instead of the shield/check

Is This A Good Question/Topic? 0
  • +

Replies To: CSS Shield icon

#2 Lightme  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 06-March 10

Re: CSS Shield icon

Posted 25 November 2015 - 08:30 AM

Does anyone now my problem, or donīt understand my question?

I tried several ways to get it, but until now I have no luck with it.
Was This Post Helpful? 0
  • +
  • -

#3 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13491
  • View blog
  • Posts: 53,888
  • Joined: 12-June 08

Re: CSS Shield icon

Posted 25 November 2015 - 08:54 AM

I am not understanding the question. Are you not sure how to use unicode characters in css, or that they are unicode options?

http://www.utf8icons.../unicode-in-css
http://fontello.com/
Was This Post Helpful? 0
  • +
  • -

#4 Lightme  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 06-March 10

Re: CSS Shield icon

Posted 25 November 2015 - 09:19 AM

Thank you for your awnser, the question is the font donīt load, I assume because I donīt get the icons from the font.
And the code is what I put. But it also donīt give me an error and before it did.
Was This Post Helpful? 0
  • +
  • -

#5 Lightme  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 06-March 10

Re: CSS Shield icon

Posted 25 November 2015 - 10:32 AM

The icons dont apear but I get the content, and I put the font loading in the CSS.
Was This Post Helpful? 0
  • +
  • -

#6 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13491
  • View blog
  • Posts: 53,888
  • Joined: 12-June 08

Re: CSS Shield icon

Posted 25 November 2015 - 10:34 AM

Okay?
Was This Post Helpful? 0
  • +
  • -

#7 Lightme  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 06-March 10

Re: CSS Shield icon

Posted 25 November 2015 - 10:40 AM

Like in www.vijver-expert.nl I want to have on my site the same icons loading. But the problem is that they donīt apear instead I get 2 crosses next to each other. How can I solve this?
Was This Post Helpful? 0
  • +
  • -

#8 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13491
  • View blog
  • Posts: 53,888
  • Joined: 12-June 08

Re: CSS Shield icon

Posted 25 November 2015 - 10:53 AM

Then find the right font they are using for the unicode characters or take a screen shot of the shield thing and use it as an image.
Was This Post Helpful? 0
  • +
  • -

#9 Lightme  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 06-March 10

Re: CSS Shield icon

Posted 25 November 2015 - 10:56 AM

So youīre saying it isnīt fontello? :|

Could you help me with telling me, wich one it is then?
Was This Post Helpful? 0
  • +
  • -

#10 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13491
  • View blog
  • Posts: 53,888
  • Joined: 12-June 08

Re: CSS Shield icon

Posted 25 November 2015 - 10:59 AM

I am saying I am not going to burn my wheels doing your work. You have the page, you have the CSS, and you can do the leg work.

Alternatively - you can screen shot it and make an image out of the shield to use.
Was This Post Helpful? 0
  • +
  • -

#11 Lightme  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 06-March 10

Re: CSS Shield icon

Posted 25 November 2015 - 11:03 AM

That is what the ´tone´ was about? Doing my work?

I wasn´t asking that, I thought it is ´Fontello´ and ask here what am I doing wrong. Because the work I did was show the whole code. Ask it friendly and nice and I get the awnser ´okay?´ back. No that is very relevant to the toppic.

Anyway thanks a lot, if you wont like too the problem why awnser at all?

This post has been edited by Lightme: 25 November 2015 - 11:04 AM

Was This Post Helpful? 0
  • +
  • -

#12 andrewsw  Icon User is offline

  • the case is sol-ved
  • member icon

Reputation: 6379
  • View blog
  • Posts: 25,770
  • Joined: 12-December 12

Re: CSS Shield icon

Posted 25 November 2015 - 11:04 AM

Quote

I uploaded the Font folder to the root of Fontello

src: url('/font/fontello.eot');


Your statement seems to suggest that your location should be /fontello/font, not the other way round.

Check your browser's console for errors.

This post has been edited by andrewsw: 25 November 2015 - 11:05 AM

Was This Post Helpful? 0
  • +
  • -

#13 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 13491
  • View blog
  • Posts: 53,888
  • Joined: 12-June 08

Re: CSS Shield icon

Posted 25 November 2015 - 11:07 AM

Look sport - your responses have been confusing as well as vague. I am piecing together what you are doing, and with out you showing where you are or what your code looks like it is difficult. That being said - asking people to scour through some Dane's website to find what specific font they are using is something you are totally able to do.
Was This Post Helpful? 0
  • +
  • -

#14 Lightme  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 06-March 10

Re: CSS Shield icon

Posted 25 November 2015 - 11:12 AM

Quote

Your statement seems to suggest that your location should be /fontello/font, not the other way round.


Yes, I had that wrong in the beginning. I uploaded the Font folder to public_html folder.
Before I got indeed Console errors. But now there are 0 erros. And it is not showing the icons. So it is pretty wierd the problem.

The other fontīs arenīt showing the icon, because when I inspect the element and only turn off the font īFontelloī then it donīt show anymore on the example page but equal like on my page the 2 crosses. So, somehow the font does load but not showing it on my page.

Quote

Look sport - your responses have been confusing as well as vague. I am piecing together what you are doing, and with out you showing where you are or what your code looks like it is difficult. That being said - asking people to scour through some Dane's website to find what specific font they are using is something you are totally able to do.


@offtoppic: Hello sport, I did showed the code that I am using. See the first toppic. I donīt like a toppic fight so please keep it clean. I know I can scoop the "DUTCH" site for the font. To my information that should be "Fontello".

Thank you. I am looking to learn, because not everybody knows everything. If Iīm not mistaking. So please, if you donīt like to awnser or teach me in your opinion is fine but please do it elsewhere.
Was This Post Helpful? 0
  • +
  • -

#15 Lightme  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 71
  • Joined: 06-March 10

Re: CSS Shield icon

Posted 25 November 2015 - 12:09 PM

Now I get it, u have a "god-mode" feeling. Sorry to bother if this is the atitude from the moderators.
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2