My Icons won't show up on my post footer

Question

Post with footer

You see the footer, there should be icons, but they're not showing up, instead you see those empty squares. How can I get them to show up.

This is my html for the footer:

<footer class="gradient">
    <div id="inf-{PostID}" class="post-inf">
        <div class="accordion-group post-meta">
            <div id="meta-{PostID}" class="meta-links clearfix collapse in">
                <div class="timestamp"><a href="{Permalink}" data-toggle="tooltip" data-placement="top" data-trigger="hover" title="View Post &ndash; {lang:Posted at FormattedTime}"><i class="icon icon-time"></i><span> {TimeAgo}</span></a>
                </div>
                <div class="note-count"><a href="{Permalink}#notes" title="{lang:This post has NoteCount notes}"><i class="icon icon-heart"></i><span> {NoteCount}</span></a>
                </div>
                <div class="reblog"><a href="{ReblogURL}" title="Reblog"><i class="icon icon-retweet"></i><span> Reblog</span></a>
                </div>{block:Photo}
                <div class="highres"><a href="{PhotoURL-HighRes}" title="{lang:View high resolution}"><i class="icon icon-picture"></i><span> High-Res</span></a>
                </div>{/block:Photo}
                <div class="share-open"><a data-toggle="collapse" data-parent="#inf-{PostID}" href="#share-{PostID}" title="{lang:Share this}"><i class="icon icon-share"></i><span> Share</span></a>
                </div>
            </div>
        </div>

I'm trying to get the icons show up with:

.index-page .grid article.minimal.type-photo footer .post-meta .meta-links .timestamp {background-image: url ('http://static.tumblr.com/rlvxgqe/0G8mt9ogs/questionmark.png');}

Also tried this:

#inf-{PostID}#meta-{PostID} .timestamp .icon.icon-time {background-image: url ('http://static.tumblr.com/rlvxgqe/0G8mt9ogs/questionmark.png');}

None of these work, I'm guessing that I'm not targeting the right anchor? Could someone give me hand? much appreciated!

Here's the full html code if it helps: http://pastebin.com/Q5m14Qk1

no? Maybe it's because I'm running on firefox? I still don't see them — M''', Sep 17 '13 at 12:28
yea dosent work in firefox, i just testet it with the newest firefox browser. — Daniel, Sep 17 '13 at 12:31
Closer to that i cant help you. But now that you know its firefox that dosent work, might even try other browesers eg. opera, ie 8+ and so forth. — Daniel, Sep 17 '13 at 12:32

score 1 · Answer 1 · answered Sep 17 '13 at 12:32

1

with the code you've posted on pastebin, im actually getting a image for the timestamp

enter image description here

please elaborate on the development environment

answered Sep 17 '13 at 12:32

Trolzie

328
3
7

yea that is alraedy settled. The issue is with firefox atm. Chrome works fine. – Daniel Sep 17 '13 at 12:34

score 1 · Answer 2 · edited May 23 '17 at 10:30

1

I have tried to check it in firefox, and I have found that FF failed to fetch the fonts. Following is the error.

Error: downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0): bad URI or cross-site access not allowed
source: http://static.tumblr.com/t7rbpdb/vMImkggx7/fontawesome-webfont.woff?v=3.0.1
Source File: http://static.tumblr.com/t7rbpdb/UDlmkgnsv/bootstrap.min.css
Line: 0
Source Code:
@font-face {   font-family: "FontAwesome";   font-style: normal;   font-weight: normal;   src: url("http://static.tumblr.com/t7rbpdb/vMImkggx7/fontawesome-webfont.woff?v=3.0.1") format("woff"); }

After searching around this error, I found following thread.

firefox @font-face fail with fontawesome

May be this will help you.

edited May 23 '17 at 10:30

Community

1
1

answered Sep 17 '13 at 12:40

Nikhil N

4,507
1
35
53

thanks, but they say that i have to change the quotes to double quotes, but I believe that my quotes are already double quotes? – M''' Sep 17 '13 at 12:47
In the bootstrap.min.css file (http://static.tumblr.com/t7rbpdb/UDlmkgnsv/bootstrap.min.css), could you try to replace single quotes of font url with double quotes. i.e. replace src:url('http://static.tumblr.com/t7rbpdb/vMImkggx7/fontawesome-webfont.woff?v=3.0.1') format('woff') with src:url("http://static.tumblr.com/t7rbpdb/vMImkggx7/fontawesome-webfont.woff?v=3.0.1") format('woff'). – Nikhil N Sep 17 '13 at 12:50
can I just copy and paste that bootstrap.min.css file, change the quotes and reupload it ? – M''' Sep 17 '13 at 13:01
I've copied and changed it with texteditor, how can I save it as bootstrap.min.css file? – M''' Sep 17 '13 at 13:10
Is it your file ? I mean http://static.tumblr.com/t7rbpdb/UDlmkgnsv/bootstrap.min.css ? If yes then you can change it and re-upload on same location. If not then you can save it as bootstrap.min.css file and upload it to on some accessible location may be your server. After that just point out this file in your theme html. – Nikhil N Sep 17 '13 at 13:14
I've changed the quotations, but it's not working http://static.tumblr.com/rlvxgqe/iS5mtbe2k/bootstrap.min.css – M''' Sep 18 '13 at 09:27
It's creating problem because of cross-domain policy. I am able to get it worked by using the Bootstrap CDN. http://www.bootstrapcdn.com/. Here's the updated theme HTML. http://pastebin.com/U7smeNqy. Note that I needed to replace class icon with glyphicon. Not sure whether you would be fine with it. – Nikhil N Sep 18 '13 at 10:13
hello I've tried the code you provided me, but it still hasn't solved the problem.. Thankyou for your help anyways – M''' Oct 14 '13 at 20:49

score 0 · Answer 3 · answered Feb 20 '15 at 12:50

0

check your .htaccess in root folder as well .htaccess in sub directories. Apply following code to appropriate .htaccess file.

Order deny,allow
Deny from all
<Files ~ ".(xml|css|jpe?g|png|gif|js|svg|woff|ttf|eot|woff2)$">
Allow from all
</Files>

answered Feb 20 '15 at 12:50

MohammedFiroz-Todotcom

11
1

My Icons won't show up on my post footer

3 Answers3