Using url within style sheet

I am working on an inherited site and have searched but can’t find answer. Hoping someone here knows answer.
Within the css the location of icomoon.woof and .ttf are referenced with
url(/wp-content/themes/…)
This gives domain.com/wp-content/
except that the wp installation is in a folder so I need
domain.com/folder/wp-content/
removing the ‘/’ url(wp-content/themes/…) I get
domain.com/folder/wp-content/themes/xxxxxxxx/assets/css/wp-content/themes/xxxxxxx/assets/fonts/icomoon.woff
I could put the folder name into the link but this would break if site is moved to a different folder

I have added the folder to the link
url(/sitefolder/wp-content/themes/…)
and this got rid of the missing files errors
but I would still like to know how to do it without editing the css if site folder is changed
Also if theme gets updated (unlikely in this case as it is a custom theme) this edit would be over written.

I think this will help you Quick Reminder About File Paths | CSS-Tricks - CSS-Tricks

Since your root is /, putting WP in a folder makes it required to declare that path in the css URL attribute.
I don’t think there is any method to avoid that, since the physical path from root just changed, thus the relative urls also need to change (as far I know)

URLs in stylesheets are relative to the stylesheet (if there is no leading slash). But you have to be careful when using tools that concatenate styles, although they should be written to handle this.

If the style is direct in the head of a page (not a <link>), then the URL is relative to the page, which is why you have trouble with a dynamic system that generates virtual page addresses.

worked it out (hopefully)
as the fonts folder is in the same folder as the css folder and as @joyously mentions links in css are relative to the location of the .css file
I changed link to e.g.
url(…/fonts/icomoon.ttf)
This will then still work if the site installation is moved but not in the case of a theme update.
I had just gone along with what was already there as it had worked when the installation was in root.
So theme developer did not use most versatile option for link

1 Like

That may break if you later decide to use one of the many optimisation plugins that concat all css into one file and serve it from the uploads folder. Better to use full URLs imo

Using .. (relative URLs or relative paths) is the best way to handle this that I’m aware of.

If such a plugin doesn’t know how to handle relative URLs correctly then it is broken.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.