微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用Unicode将FontAwesome绑定到:: before-显示crypdo-icon

如何解决使用Unicode将FontAwesome绑定到:: before-显示crypdo-icon

我试图将FontAwesome包含在:: before-element中。 该网站的include起作用(我的网站上i元素中还有其他Icon),但unicode方式不起作用。

我试图像这样在fontAwesome中为上一个按钮添加一个图标:

    .owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot {
    font-family: "fontAwesome";
}

.owl-carousel .owl-nav .owl-prev::before{
    content: "\f053";
    font-family: FontAwesome;
    margin-right:10px;
}

但是它只是这样显示

Error

我测试了添加高度和宽度,使其成为块元素..似乎没有任何效果。我正在使用Contao CMS。

解决方法

当我通过开发工具将{​​{1}}插入按钮之前,然后对其进行检查时,它显示function generateThumbnail(outputPath,filename,thumbnailPath) { return new Promise((resolve,reject) => { gm(outputPath) // The name of your pdf .setFormat("jpg") .resize(200) // Resize to fixed 200px width,maintaining aspect ratio .quality(75) // Quality from 0 to 100 .write(`${thumbnailPath}/${filename}.jpg`,function (error) { // Callback function executed when finished if (!error) { resolve("Thumbnail generated") } else { reject(`error from gm,${error}`) } }) }) } function libreConverter(readFile,outputPath) { return new Promise((resolve,reject) => { console.log('Conversion to PDF started'); libre.convert(readFile,"pdf",undefined,(err,done) => { if (err) { reject(`Libre error: ${err}`) } else { fs.writeFileSync(outputPath,done); resolve("Converted to PDF"); } }); }) } function pdf2picConverter(outputPath,pdf2PicOptions) { return new Promise((resolve,reject) => { const pdf2pic = new PDF2Pic(pdf2PicOptions) pdf2pic.convertBulk(outputPath,-1).then(() => { //resolve resolve("PDF converted to png") }).catch((err) => { reject("error from PDF2Pic",err) }) } ) } function converttoVideo(exportPath,videoOptions,videoPath) { return new Promise((resolve,reject) => { fs.readdir(exportPath,data) => { if (!err && !_.isEmpty(data)) { const imagePaths = data.map(item => `${exportPath}/${item}`) videoshow(imagePaths,videoOptions) .save(`${videoPath}/${filename}.mp4`) .on('start',function (command) { console.log('videoshow process started:',command) }) .on('error',function (err,stdout,stderr) { reject('videoshow Error:',err) }) .on('end',() => { resolve("Video saved") }) } else { reject("error from readdir",err) } }) } ) } function p2vConverter(filepath,pdf2PicOptions,videoPath,thumbnail,thumbnailPath) { return new Promise(async (resolve,reject) => { try { const outputPath = path.join(__dirname,"../uploads/",`Folder_${filename}/`,`${filename}.pdf`) const exportPath = path.join(__dirname,"outputs") const dir = path.join(__dirname,`Folder_${filename}`) fs.mkdir(exportPath,{ recursive: true },(err) => { if (err) throw err; }); const readFile = fs.readFileSync(filepath); await libreConverter(readFile,outputPath).then(libreMessage => console.log(libreMessage)).catch(err => console.log(err)) if (thumbnail) { await generateThumbnail(outputPath,thumbnailPath).then(thumbnailMessage => console.log(thumbnailMessage)).catch(err => console.log(err)) } pdf2PicOptions.savedir = exportPath pdf2PicOptions.savename = filename await pdf2picConverter(outputPath,pdf2PicOptions).then(p2pMessage => console.log(p2pMessage)).catch(err => console.log(err)) await converttoVideo(exportPath,videoPath).then(ctvMessage => { return ctvMessage }).catch(err => console.log(err)) fs.rmdir(dir,(err) => { if (err) { reject("error from rmdir",err) } console.log(`${dir} is deleted!`); }); resolve(`${videoPath}/${filename}.mp4`) } catch { reject() } }) } const videoOptions = { fps: 25,loop: 5,// seconds transition: true,transitionDuration: 1,// seconds videoBitrate: 1024,videoCodec: 'libx264',size: '640x?',format: 'mp4',pixelFormat: 'yuv420p' } const pdf2PicOptions = { density: 100,// output pixels per inch format: "png",// output file format size: "600x600" // output size in pixels } const videoPath = path.join(__dirname,"../uploads/") const thumbnail = true; const thumbnailPath = path.join(__dirname,"../uploads/") await p2vConverter(file.path,file.filename,thumbnailPath).then(output => console.log(`video saved at: ${output}`)) 元素的字体系列为<i class="fas fa-chevron-left"></i>-您使用了i代替按钮"Font Awesome 5 Free"元素。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。