如何将多包 flaticons 合并为一包？

Posted 2023-02-22

技术标签:

【中文标题】如何将多包 flaticons 合并为一包？【英文标题】：How to merge multiple packs of flaticons into one pack? 【发布时间】：2015-11-18 04:44:01 【问题描述】：

我在我的网站上使用Flaticons。大多数情况下，我正在收集 3 到 4 包的图标。我想知道，是否有可能将来自Flaticons 的多个包合并到一个新包中。提前谢谢！！！

【问题讨论】：

我认为这是一个很好的问题。我也下载了一些字体，发现它们的名称相同很奇怪。很难实现，除非有一些聪明的方法来组合它们？ 【参考方案1】：

打开flaticon.css，把font-family改成别的，比如本例，我改成Flaticon2。然后，请注意 css 类名必须是 Unicode。在这种情况下，我将所有类名更改为以.flaticon2

这是我的flaticon.css：

@font-face 
  font-family: "Flaticon2"; /* <<< NOTE */
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;


@media screen and (-webkit-min-device-pixel-ratio:0) 
  @font-face 
    font-family: "Flaticon2"; /* <<< NOTE */
    src: url("./Flaticon.svg#Flaticon") format("svg");
  


[class^="flaticon2-"]:before, [class*=" flaticon2-"]:before,
[class^="flaticon2-"]:after, [class*=" flaticon2-"]:after    
  font-family: Flaticon2;
        font-size: 20px;
font-style: normal;
margin-left: 20px;


.flaticon2-001-cloudy:before  content: "\f100"; 
.flaticon2-002-wallet:before  content: "\f101"; 
.flaticon2-003-trekking:before  content: "\f102"; 
.flaticon2-004-travel:before  content: "\f103"; 
.flaticon2-005-train:before  content: "\f104"; 
.flaticon2-006-tourist:before  content: "\f105"; 
.flaticon2-007-ticket:before  content: "\f106"; 
.flaticon2-008-taxi:before  content: "\f107"; 
.flaticon2-009-sunset:before  content: "\f108"; 
.flaticon2-010-sunglasses:before  content: "\f109";

【讨论】：

【参考方案2】：

你可以这个网站