Question

我们仅使用font-awesome.min.css中的几个fa图标。有没有一种方法可以将fa图标直接添加到css文件中？这样一来，只有1个CSS文件会被加载

Answer 1

您可以尝试这种方法:) 您有svg文件可以由CSS注入，并且在html中使用您自己的类

这是一个例子

<i class="bb-icon"></i>

在CSS文件中：

.bb-icon {content: url(https://upload.wikimedia.org/wikipedia/commons/e/e6/Home_Icon.svg); width: 100px; height: 100px;}

工作示例： Code Pen Link

在这里，您还可以准备好svg css并将其直接放入样式表中 Make SVG CSS READY

CSS：

.bb-icon2 {content: url("data:image/svg+xml,%3Csvg xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23'%0Axmlns:svg='http://www.w3.org/2000/svg'%0Axmlns='http://www.w3.org/2000/svg'%0Awidth='512' height='512'%0Aversion='1.1' id='svg2'%3E%3Cg transform='translate(0,448)'%3E%3Cpath style='fill:%23000000;fill-opacity:1;stroke:%23000000;stroke-width:12;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' d='m 16,256 240,-192 96,72 0,-32 48,0 0,72 96,80 -48,0 0,192 -120,0 0,-160 -96,0 0,160 -168,0 0,-192 z' transform='translate(0,-448)'/%3E%3C/g%3E%3C/svg%3E"); width: 100px; height: 100px;}

要更改颜色，您需要更改填充属性或填充样式...但是，这很棘手

Answer 2

在标题中添加超棒的字体链接

  function getFilesFromFolder(folder){
    var arr = [];
    arr.push([folder.getName(),folder.getUrl(),folder.getOwner().getName()])
    var subfolders = folder.getFolders();
    var files = folder.getFiles():

    while(files.hasNext()){
      arr.push(/*file details*/);
    }

    //recurse into subfolders here.
    while(subFolders.hasNext()){    
      arr.concat(getFilesFromFolder(subFolders.next());  //notice how we call the function from within itself.
    }

    return arr;
  }

现在您可以在CSS中使用图标als伪元素

您可以在此处了解更多信息： https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

有没有一种方法可以将fa图标添加到css文件中

2 个答案: