Sass制作Font Awesome图标

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

Font AwesomeDave Gandy通过字体制作的几百个icons图标。在前端界享有盛名。使用@font-face制作的图标可以随意的放大,并通过CSS中字体相关的CSS对图标进行美化,比如说可以改变图标颜色、大小和增加阴影等,但他也存在一定的弊端。

很多时候,在项目中为了调用整套图标中的某几个时,为了使用Font Awesome制作的图标,我们不得不被迫加载制作icon的所有样式和文件。比如:

.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-heart:before {
  content: "\f004";
}
.fa-star:before {
  content: "\f005";
}
...

如此一来,造成文件臃肿,而且有很多冗余没用的代码。

这个时候,我们都在思考,有没有办法能帮助我们,使用Font Awesome图标能按我们所需调用需要图标的样式。换句话说,如果我们需要一个图标,就使用这个图标对应的样式,如果我们需要某几个图标,我们就使用这几个图标对应的样式。看似蛮有意思,那么我们今天,就一起来探讨这个问题。

Sass功能

带着这样的问题,我在想,是否可以使用CSS预处理器语言中的Sass来进行处理。了解Sass的同学都知道,Sass可以进行一些预编码处理,比如说定义mixins、%placeholder等,当需要使用的时候,通过@include和@extend来调用。甚至还可以像其他程序一样,定义函数功能,实现一些自定的功能。那么我们今天就借助Sass的这些特性,来做进一步的思考,是否能通过Sass来帮助我们实现我们前面所说的需求。

实现思路

在Font Awesome字体图库中,每个图标都有一个对应的编码,比如说glass=>"\f000",music=>"\f001"。整个图库我们有近三百个不同的图标,也就是说我们有三百多个这样的实体编码。那么针对这种现像,我们是否可以考虑像其他的程序语言一样,给他们定义一个数组,并将此数组赋值给一个变量。按照这样的思路来说,在Sass中正好具有这样的特性,我们可以将所有图标对应的编码以数组的形式赋值给一个变量。

有了数组就解决我们一大问题,为什么这么说呢?打个比方,我们需要其中的某个图标,我们是否需要一个类似遍历数组的函数,从整个列表中找到需要的东西。也就是说,我们需要在Sass中定义一个遍历数组的函数。

有了变量,也有了遍历功能,能帮助我们找到需要的图标,但我们还需要一些默认的样式功能,比如说,图标怎么调用,这个时候我们就需要通过Sass的mixin来制作,便于每次的调用。

数组、函数和功能都具有了,这个时候我们回到CSS面对的问题中。前面说过,在CSS中使用Font Awesome图库,不管我们需要使用的图标有多少,我们都必须全部加载。而我们真正需要的是要有一个开关——按需开启。也就是说,如果我只需要某几个图标,我能通过一定的方式只开启这几个对应的图标,调出他们对应的样式。如果我们需要所有的图标显示,我也有一个功能开关,可以通过某个功能,一下全部开启。

如此一来,我们的思路就很清楚了,我们使用Sass制作灵活开启图标,需要以下几个东东:

  • 数组:用来定义所有的图标对应的实体编码
  • 引用字体的Mixin:通过mixin,调用@font-face所需的字体
  • 调用单个图标的Mixin:通过这个mixin按需实现单个或某几个图标
  • 调用合部图标的Mixin:通过这个mixin,实现是否开启有所图标
  • 遍历数组的函数:通过这个遍历函数,获取所需要的图标变量

扯了一大通,大家可能想知道的是如何用Sass实现前面说的这一切。那我们现在就开始。

项目结构

为了更好的说明整个实现过程,我们先创建本地创建一个项目,并把制作Font Awesome图标所需要的字体文件引入到项目中。而其中我们同时制作了一个文件夹"sass"来放置.scss文件,并且创建一个文件夹"css",用来放置Sass编译出来的.css文件。整个项目的结构如下所示:

+font-awesome
|-+--fonts
|-|----fontawesome-webfont.eot
|-|----fontawesome-webfont.svg
|-|----fontawesome-webfont.ttf
|-|----fontawesome-webfont.woff
|-+--stylesheets
|-|--+--sass
|-|--+--css

声明数组

在Font Awesome的CSS样式当中,我们能看到一大堆类似于下面的代码:

...
.fa-film:before {
  content: "\f008";
}
.fa-th-large:before {
  content: "\f009";
}
...

而当中每个"\f008"这样的编码就是对应的一个图标,而在Sass中,我们也需要这样的编码,不过不同的是,我们将其以数组的方式定义的。为了能更好的组织这些编码和其他相应的变量,特些在sass目录中创建了一个名叫_variables.scss的文件,并且在这个文件中放置如下所示的代码:

@charset "UTF-8";

//Variables

$fa-css-prefix:                 icon- !default;
$fa-family-name:                "FontAwesome" !default;
$file-path:                     "../../fonts/fontawesome-webfont" !default;

$icons:
    glass                       "\f000",
    music                       "\f001",
    search                      "\f002",
    envelope-o                  "\f003",
    heart                       "\f004",
    star                        "\f005",
    star-o                      "\f006",
    user                        "\f007",
    film                        "\f008",
    th-large                    "\f009",
    th                          "\f00a",
    th-list                     "\f00b",
    check                       "\f00c",
    times                       "\f00d",
    search-plus                 "\f00e",
    search-minus                "\f010",
    power-off                   "\f011",
    signal                      "\f012",
    cog                         "\f013",
    trash-o                     "\f014",
    home                        "\f015",
    file-o                      "\f016",
    clock-o                     "\f017",
    road                        "\f018",
    download                    "\f019",
    arrow-circle-o-down         "\f01a",
    arrow-circle-o-up           "\f01b",
    inbox                       "\f01c",
    play-circle-o               "\f01d",
    repeat                      "\f01e",
    refresh                     "\f021",
    list-alt                    "\f022",
    lock                        "\f023",
    flag                        "\f024",
    headphones                  "\f025",
    volume-off                  "\f026",
    volume-down                 "\f027",
    volume-up                   "\f028",
    qrcode                      "\f029",
    barcode                     "\f02a",
    tag                         "\f02b",
    tags                        "\f02c",
    book                        "\f02d",
    bookmark                    "\f02e",
    print                       "\f02f",
    camera                      "\f030",
    font                        "\f031",
    bold                        "\f032",
    italic                      "\f033",
    text-height                 "\f034",
    text-width                  "\f035",
    align-left                  "\f036",
    align-center                "\f037",
    align-right                 "\f038",
    align-justify               "\f039",
    list                        "\f03a",
    outdent                     "\f03b",
    indent                      "\f03c",
    video-camera                "\f03d",
    picture-o                   "\f03e",
    pencil                      "\f040",
    map-marker                  "\f041",
    adjust                      "\f042",
    tint                        "\f043",
    pencil-square-o             "\f044",
    share-squar
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/create-font-awesome-font-icons-with-sass.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部