简体   繁体   中英

How to use Font-face and background image with asset-pipeline plugin?

I'm using CodeSleeve's asset-pipeline to manage my style sheets on my Laravel project (PHP framework). The application.css file is well downloaded, but what is the method to allow images and font-face use?

My application.css file :

@font-face {
    font-family: 'mrsMonster';
    src: url('/fonts/mrsMonster/mrsmonster-webfont.eot');
    src: url('/fonts/mrsMonster/mrsmonster-webfont.eot?#iefix') format('embedded-opentype'),
        url('/fonts/mrsMonster/mrsmonster-webfont.woff') format('woff'),
        url('/fonts/mrsMonster/mrsmonster-webfont.ttf') format('truetype'),
        url('/fonts/mrsMonster/mrsmonster-webfont.svg#mrs._monsterregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#h-navbar {
    font-family: mrsMonster;
    background: url('/images/banniere.png') no-repeat;
}

The solution is to put the fonts folder into the stylesheet directory, and then write:

@font-face{
    font-family: Airplanes;
    src: url('fonts/airplanes/airplanes_in_the_night_sky-webfont.eot');
    src: url('fonts/airplanes/airplanes_in_the_night_sky-webfont.eot?#iefix') format('embedded-opentype'),
        url('fonts/airplanes/airplanes_in_the_night_sky-webfont.woff') format('woff'),
        url('fonts/airplanes/airplanes_in_the_night_sky-webfont.ttf') format('truetype'),
        url('fonts/airplanes/airplanes_in_the_night_sky-webfont.svg#airplanes_in_the_night_skyRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

The images folder can be at the same level than the stylesheet one's, and then you should write:

background: url('myImage.png');

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM