Welcome Guest, Not a member yet? Register   Sign In
relative paths inside css file
#1

Hi there. Longtime professional CG coder, but (relatively) new to web tech and php. (I did support a django website for a while, though.) That said, I've looked around at quite a few frameworks and CodeIgniter strikes me -- by far! -- as the most elegant and intuitive that I've come across, so much so that it's worth it to me to finally learn PHP.

I'm finally refactoring my website (currently all static pages) by diving into codeigniter. It's going well, got my controllers and views working. (Not using models just yet...)

But I'm having a problem loading a font-family through a css file. I've scoured the web but couldn't find a solution that worked for me, hence I'm coming here.

My css and js files are loading just fine. One css file contains the following:

Code:
  @font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

The directory structure is pretty straightforward:

|-root
  |-theme
    |-stylesheets
      |-websymbols

Some people have asked the same question at StackOverflow, but the suggestions didn't work for me (such as editing the .htaccess file to add exclusions for the pertinent directories).

The font-face has always loaded for me in the past, but codeigniter doesn't seem to like relative links inside the css file. I've tried every variation of relative path structures I could think of, but nothing worked. It also doesn't seem to like absolute paths when I spell out the absolute url of the websymbols directory (using the value returned by base_url())!

Any helpful suggestions very appreciated!

PS Yes, codeigniter uses "assets" as a dirname convention, but to make my life easier I'm sticking with my original "theme" dirname.
Reply
#2

(This post was last modified: 12-17-2015, 07:46 PM by meow.)

(12-17-2015, 11:02 AM)Aleksi Wrote: Hi there. Longtime professional CG coder, but (relatively) new to web tech and php. (I did support a django website for a while, though.) That said, I've looked around at quite a few frameworks and CodeIgniter strikes me -- by far! -- as the most elegant and intuitive that I've come across, so much so that it's worth it to me to finally learn PHP.

I'm finally refactoring my website (currently all static pages) by diving into codeigniter. It's going well, got my controllers and views working. (Not using models just yet...)

But I'm having a problem loading a font-family through a css file. I've scoured the web but couldn't find a solution that worked for me, hence I'm coming here.

My css and js files are loading just fine. One css file contains the following:

Code:
  @font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols/websymbols-regular-webfont.eot');
    src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('websymbols/websymbols-regular-webfont.woff') format('woff'),
         url('websymbols/websymbols-regular-webfont.ttf') format('truetype'),
         url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
  }

The directory structure is pretty straightforward:

|-root
  |-theme
    |-stylesheets
      |-websymbols

Some people have asked the same question at StackOverflow, but the suggestions didn't work for me (such as editing the .htaccess file to add exclusions for the pertinent directories).

The font-face has always loaded for me in the past, but codeigniter doesn't seem to like relative links inside the css file. I've tried every variation of relative path structures I could think of, but nothing worked. It also doesn't seem to like absolute paths when I spell out the absolute url of the websymbols directory (using the value returned by base_url())!

Any helpful suggestions very appreciated!

PS Yes, codeigniter uses "assets" as a dirname convention, but to make my life easier I'm sticking with my original "theme" dirname.


Are you following along the tutorial in the docs? Mind pasting here the call method to your CSS/JS files?
Here is how I've got it to work for my first app I'm working on:

Structure:


Code:
|--root
   |--application
      |--views
         |--templates
            |--header.php
   |--css
      |--20151206.css
   |--img
   |--system


Inside my header I have:
Code:
<!DOCTYPE html>
<html>
    <head>
        <title><?php echo htmlspecialchars($title); ?></title>

        <?php echo link_tag(base_url().'css/20151206.css'); ?>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>


Inside the CSS I have:
Code:
@media screen and (min-width:500px){
    html {
        background: url(../img/dufer.jpg) fixed;
        background-size: cover;
        overflow: auto;
        }
}


And it works fine. EDIT: Just noticed your CSS has 'src' and I havent tried that yet.
Reply
#3

Hello meow, thank you for replying.

Quote:Are you following along the tutorial in the docs? Mind pasting here the call method to your CSS/JS files?

Here's my header:


Code:
<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title><?php echo $title; ?></title>
<!-- CSS Files-->
<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/style.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/homepage.css"><!-- homepage stylesheet -->
<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/skins/khaki.css"><!-- skin color -->
<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/responsive.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>/theme/stylesheets/modal.css">
</head>

Here's a more comprehensive view of the pertinent file structure:

Code:
|--root/
   |--application/
      |--views/
         |--pages/
         |--templates/
            |--header.php
   |--theme/
      |--images/
      |--javascripts/
      |--stylesheets/
         |--homepage.css
         |--modal.css
         |--style.css
         |--responsive.css
         |--skins/
            |--khaki.css
         |--websymbols/
            |--websymbols-regular-webfont.eot
            |--websymbols-regular-webfont.svg
            |--websymbols-regular-webfont.ttf
            |--websymbols-regular-webfont.woff

The homepage.css is the one attempting to import the websymbol font-family.

Thx again.
Reply
#4

If your using web fonts then all of your views will use them,
So why keep them in different theme folders?

assets
-- fonts
---- font-awesome
---- etc;
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#5

(12-18-2015, 05:15 AM)InsiteFX Wrote: If your using web fonts then all of your views will use them,
So why keep them in different theme folders?

assets
-- fonts
---- font-awesome
---- etc;

Actually, only my home page is using that particular web font. (And I only have the one theme folder, which functions as the assets folder.)
Reply
#6

I don't understand why this happened, but it seems to be working now.

I've been working on my site throughout the day and I still had the same problem, which is no surprise since I haven't addressed the problem at all today since I've been waiting for a kind soul to give me some advice.

But I just now reloaded the home page and the font-family is loading correctly.

Or 2/3 of it, since one of the special characters still isn't correct.

I haven't done anything to the css file in question, and I haven't moved any of the pertinent files around.

One thing coders hate is a mystery, and this is beyond my current knowledge-base to have any clue as to why it's suddenly (mostly) working.

So I'll just shrug my shoulders and carry on as if everything's ok, and will ignore that nebulous nagging feeling I have.

Thank you for your attention. Sorry to bother you.


Huh
Reply




Theme © iAndrew 2016 - Forum software by © MyBB