URGENT - HTML Icon Help!

Eclipse · 06-06-2014, 08:43 PM

Hey guys,

I needed a quick site, so I went online to get a template. However, I ran into a major problem.

Let's say the template has this code:

Code:
<span class="fa fa-users"></span>

Online, even in Firefox, the icon shown up normally, but when I download the template, and upload it myself or run it on a local server, the icon does not show up or it's a weird box. It works in chrome and it's not just on my computer. If I upload it and view it from another computer or from another network, the problem persists. The creators must have a fix for it to work in my browser in the demo however, but I'm struggling to see how.

E.G. http://demo.highthemes.com/html/bizrise/index.html

Any help?

Aurora

Index page plus css plus js:

https://mega.co.nz/#!rVEBSTwY!Y5gdFZmRws...lK2XjZtkso

3SidedSquare · 06-06-2014, 09:02 PM

(06-06-2014, 08:43 PM)Aurora Wrote: Hey guys,

I needed a quick site, so I went online to get a template. However, I ran into a major problem.

Let's say the template has this code:

Code:
<i class="fa fa-laptop"></i>

*words*

Any help?

Aurora

Can we get the CSS? Look for something like this

.fa fa-laptop{
*Some stuff*
}

Also, correct me if I'm wrong, but the <i> tag is for italics

Eclipse · 06-06-2014, 09:19 PM

(06-06-2014, 09:02 PM)3SidedSquare Wrote: Can we get the CSS? Look for something like this

.fa fa-laptop{
*Some stuff*
}

Also, correct me if I'm wrong, but the <i> tag is for italics

Hmm, it should be in the source code in the demo, as CSS is client side. I've checked it out and found some references to fa-laptop, but there are too many to quote.

Naa, it's for icons or something. Italics is <em>.

Equinox · 06-06-2014, 09:41 PM

(06-06-2014, 09:19 PM)Aurora Wrote: Hmm, it should be in the source code in the demo, as CSS is client side. I've checked it out and found some references to fa-laptop, but there are too many to quote.

Naa, it's for icons or something. Italics is <em>.

If you're trying to use an image through CSS
(i.e.

Code:
.image {background:url(http://someurl.url/url.png);}

), you will need to set a height and width for it to be displayed. Try going for the image's actual size.

So if I have an image that is 450x800 px, I would need to put this:

Code:
.image {
    background:url(http://someurl.url/url.png);
    height: 450px;
    width: 800px;
}

Eclipse · 06-06-2014, 09:50 PM

(06-06-2014, 09:41 PM)Duubz Wrote: If you're trying to use an image through CSS
(i.e.

Code:
.image {background:url(http://someurl.url/url.png);}
), you will need to set a height and width for it to be displayed. Try going for the image's actual size.

So if I have an image that is 450x800 px, I would need to put this:

Code:
.image { background:url(http://someurl.url/url.png); height: 450px; width: 800px; }

I think you misunderstand. What the problem is that <i class="fa fa-something"></i> Does not show up in firefox. Let me give you an example.

Code:
<article class="item col-md-4 col-sm-4 col-xs-12 animated hiding" data-animation="fadeInDown" data-delay="500">
                    <div class="box-wrapper">
                        <div class="circle-wrap"><span class="fa fa-random"></span></div>
                    </div>
                    <h5>Analystic</h5>
                    <p>Ipsum to popular a belief, Lorem Ipsumsim ply It has roots in a piece of class.</p>
                </article>

Original site:

[Image: 4c94851f11d3c25f7e651bc36fed4365.png]

Template downloaded and/or re-uploaded and viewed in Firefox:

[Image: 89c9eb64fe0eb63bf1332b3b295ff810.png]

Equinox · 06-06-2014, 09:59 PM

(06-06-2014, 09:50 PM)Aurora Wrote: I think you misunderstand. What the problem is that <i class="fa fa-something"></i> Does not show up in firefox. Let me give you an example.

Code:
<article class="item col-md-4 col-sm-4 col-xs-12 animated hiding" data-animation="fadeInDown" data-delay="500"> <div class="box-wrapper"> <div class="circle-wrap"><span class="fa fa-random"></span></div> </div> <h5>Analystic</h5> <p>Ipsum to popular a belief, Lorem Ipsumsim ply It has roots in a piece of class.</p> </article>

Original site:

Template downloaded and/or re-uploaded and viewed in Firefox:

Can't do much else without the CSS, bby.

cr33pyguy · 06-06-2014, 10:38 PM

(06-06-2014, 09:19 PM)Aurora Wrote: Hmm, it should be in the source code in the demo, as CSS is client side. I've checked it out and found some references to fa-laptop, but there are too many to quote.

Naa, it's for icons or something. Italics is <em>.

See the top of the website, does it use a separate CSS file?

Here you go, in the <head>

Spoiler: long codeCode:
<!-- Styles -->
    <link rel="stylesheet" href="styles/bootstrap.min.css" type="text/css" media="all" />
    <link rel="stylesheet" type="text/css" href="styles/prettyPhoto.css" media="screen" />
    <link rel="stylesheet" href="styles/font-awesome.min.css" type="text/css" media="all" />
    <link rel="stylesheet" href="styles/animate.css" type="text/css" media="all" />
    <link rel="stylesheet" href="styles/jquery.bxslider.css" type="text/css" media="all" />
    <link rel="stylesheet" href="styles/toastr.min.css" type="text/css" media="all" />
    <link rel="stylesheet" href="styles/flexslider.css" type="text/css" media="all" />
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />

you'll need to download the CSS files separately :3

Hope I could help Smile

Also, I'll tell you that when editing/viewing websites like this, view-source, and inspect element are your best friends. Wink

Lain · 06-07-2014, 02:32 AM

In the header of the template, there should be a stylesheet referencing Font Awesome. In the link tag, it should start with something similar to

Code:
href="//...

pre-pend http: to the front like thus

Code:
href="http://

I'd give a more in-depth explanation, but I'm on mobile at the moment, my solution is purely based on guesswork.

EDIT: Got home and had a look, it seems like my solution is irrelevant, PM me the files you've got and I'll be able to help you.

Eclipse · 06-07-2014, 08:24 AM

(06-07-2014, 02:32 AM)Koala Wrote: In the header of the template, there should be a stylesheet referencing Font Awesome. In the link tag, it should start with something similar to
Code:
href="//...
pre-pend http: to the front like thus
Code:
href="http://

I'd give a more in-depth explanation, but I'm on mobile at the moment, my solution is purely based on guesswork.

EDIT: Got home and had a look, it seems like my solution is irrelevant, PM me the files you've got and I'll be able to help you.

I'll upload it as a .zip, standby.

(06-06-2014, 09:59 PM)Duubz Wrote: Can't do much else without the CSS, bby.

Uploading all the stylesheets.

(06-06-2014, 10:38 PM)cr33pyguy Wrote: See the top of the website, does it use a separate CSS file?

Here you go, in the <head>

Spoiler: long code

Code:
 <link rel="stylesheet" href="styles/bootstrap.min.css" type="text/css" media="all" /> <link rel="stylesheet" type="text/css" href="styles/prettyPhoto.css" media="screen" /> <link rel="stylesheet" href="styles/font-awesome.min.css" type="text/css" media="all" /> <link rel="stylesheet" href="styles/animate.css" type="text/css" media="all" /> <link rel="stylesheet" href="styles/jquery.bxslider.css" type="text/css" media="all" /> <link rel="stylesheet" href="styles/toastr.min.css" type="text/css" media="all" /> <link rel="stylesheet" href="styles/flexslider.css" type="text/css" media="all" /> <link rel="stylesheet" href="style.css" type="text/css" media="all" />

you'll need to download the CSS files separately :3

Hope I could help

Also, I'll tell you that when editing/viewing websites like this, view-source, and inspect element are your best friends.

Yeah, I got all that, but thanks anyway. <3

Index page plus css plus js:

https://mega.co.nz/#!rVEBSTwY!Y5gdFZmRws...lK2XjZtkso

Eclipse · 06-07-2014, 09:32 AM

Actually, I think it's<span>. I'm not sure.

URGENT - HTML Icon Help!
Author Message