尚硅谷前端基础 (78)

好，那么接下来我们继续来看这个图标字体，那可能你看到这儿会觉得这个。第一这个东西感觉挺神奇的是吧，哎，其实一点也不神奇，它的原理跟我们刚才说那个found FA跟那个found family一样，我们直接看一下，嗯，其实这东西怎么看，它原理啊，其实很简单，其实我们在这儿用的话，其实就用了两个类，一个FA，一个FA是吧，像这个类是吧，用了这些类，所以它的秘诀呢，肯定都在这个类里面都能体现出来，所以你要看的话，直接去这个类里面看一下就OK了啊，所以我们来看一下我们这o.CSS这文件怎么看啊，你直接按CTRL一点就会打开这个文件的源码啊，CTRL一点你只需要看一下它给这个FA这个类啊，设置什么东西，首先我们来看啊，F fas在这儿，诶你看这有一堆什么FA啊，FA s far FA fad FAB，诶就FA跟B是免费的，其他是收费的啊，收费的你也你也用不了，不用管它了啊，然后呢，这儿设置这些字体，这都不用管了，那我们来看它这个字体它是怎么设置上的呀。

为什么我就能用这个字体，所以它这里面肯定会有一个fo face，我们来看有没有，是不是这就有一个fo face，哎，Face你看这有一个found on some51个bras，这个就是我们用的那个什么呀，FAB，那个bras嘛，就是一个FAB，这个时候你看啊，它在这儿，哎，Found family这是它的名，然后这个src，这是不是引入了字体文件啊，哎，字体文件什么这个呀，哎这个ET的呀，这一个格式，你看它这文件是不是还挺多的呀，你看这儿有一个文件，两个文件。然后三个文件，四个文件。五个文件。六个文件。七个文件是不是指定了七个文件呀，哎，七个文件它为什么指定这么多，它指定这个字体格式，其实就是为了解决我们这个兼容性的问题啊，就是为了解决我们兼容性问题，这样它指定完了以后的话，就是它可以兼容所有的览气，包括应该我记得它的兼容性应该到IE7都可以兼容，但是I7我们也不用了是吧？就是说一些老版本的浏览器都会兼容，所以它这块只能自己格式的文件会比较比较多，确保一个兼容性，那这个东西你要自己写，那么OK，这些文件你可能也得需要写，所以它就是把这些字体文件，字体文件都在哪呢？实际上都在我们刚才的那个，我们这是有一个这个放呀，哎，你看这是不是有一堆的字体文件呀，哎，这个里边存的就是我们这些小青蛙啊，小铃铛这些东西全都存到了这些字体文件里，而我们在我们的这个O点4SS里，我们过什么呢？我们通过这个放的FA是不是把它引进来，哎，引进来，然后你再看我们的FA干嘛了，FA。

其实做的事很简单，是不是就把这个玩意儿设置成了它的一个字体啊，哎，所以当我们给这个元素加上一个FAB，其实的事儿很简单，就是把这个字体在这个元素上应用了啊，应用了同样FA，我们来看看FA在哪儿呢？FA是不是在这儿呢？FA指能自己叫做一个放的R，一个五，一个free在这儿是不是也指定这些字体啊，哎，所以这些字体都是他们去通过这个放的FA去引入的，也就说这个小青蛙也好，铃铛也好，还是什么这个就残疾人这个轮椅也好，这些图标它实际上都在那个字体文件里已经绘制好了，而我们所谓的去引入这个什么呢？引入这个类实际上就是把这个字体给你设置这个字体所然后所谓的这个FABI啊，FA，什么这玩意儿，它是指定的是什么呢？你要用的是这里边的哪个字体所。

你可以看一下FFABI是什么玩意，Ffa你看它是不是就指定，哎，你看f FA BI before是不是就指定一个字体格式啊，哎，所以其实它并不难啊，原理的话也也都能也都能看懂啊，也都能看懂，好那这里边我们看完了，呃，原理我们简单的理一下，到时候自己看一下就OK了啊主要还是会用啊，主要还是会用，然后呢，我们再说一下我们自图标自己的一个其他的使用方式，我们来一个零三，还是我们这个图标字体点一个A毛，呃，我们把这个页面呢，还是写上啊，写上页面去给它去掉啊，页面里面呢，我们要用图标字体肯定还是得用link去引入啊，引入的是我们这个点鞋盖，我们这个FA下边的一个CSS，下边一个o.CSS直接引入，引入完了以后，在这儿我们之前用图标字体怎么用。

怎么用？哎，创建一个标签，给它来一个class class我们叫做一个as，然后后边再写一个FA，比如我来一个cat有没有，诶猫是不是就出来一个猫啊，哎引用完了，然后再给它设置样式就完事了，对吧？哎，但是这种方式的话，这是一种使用方式，但是有的时候这种方式它不一定好用，比如说我这有一个这个u Li，哎u Li里边我们放一个这个Li Li里面写一个，我们这随便写一个，写一个这个哎叫锄禾日当午，哎这来一个什么呢？来一个这个汗滴禾下土，哎这一个是谁知盘中单下边是粒粒皆心，写完这个以后啊，我们这写点样式啊，我把它这个项目符号给它去掉啊，给它去掉，我们这直接来什么呢？哎，来一个这个Li，我们直接来一个这个list一个。

哎，我们直接给它来一个这个，那把它这个项目方给它去掉，去掉以后的话，我不是说不想要项目花，我想给它手动指定一个，哎，比如说我想干嘛呢，我想拿这个小猫当山母符，那这个时候的话，我们就得怎么办了，那你就小猫你就加上一个呗，你就在每一个LY的前边，你加上一个这个，哎，哎，Class我们叫做一个FA，哎类我们叫FA，我们看看有没有star sa star。

Star SAR star，哎，我是不是用一个星星作为项目符号啊，哎，我就加上了，是不是就就有了，哎，就有了，那你说了我每一个前面是不是都得加呀？哎，你就CTRLCCTRLVCTRLVCTRLV，是不是就每一个前面就都有这个星星了，哎你说这还得换行，因为它这个我前边换行没换行的不对齐了，哎，那前边这回就都有这个星星了，对吧，就加上了，哎呀，这加是加上了，但是你就会感觉些许有那么一些麻烦，怎么麻烦呢？我现在有四个L。我就写了四个。我有十个ay呢，你得十个，你要有100个呢，你就得写100个，那这样写是不是就很麻烦呀，哎，很麻烦，所以啊，我们写我们使用这个图标字体的话，我们除了可以这么用，我们还可以怎么用呢？我们还可以通过我们那个伪元素来用，那现在我们想的是我实际上就想给一个元素，给每一个Li前边是不是加上一个小星星了，哎，小星星，那我们就说了，我们有没有方式能一起把这个前面都选中呢？哎，我们有一个东西叫做Li冒号，冒号一个before啊before以后我们可以通过这个content的，比如说我直接来一个A啊，来一个A，那这样的话，我们在我的每一个前面是不是都加了一个A呀，哎，加了一个A，那这时候其实我只需要这写一个什么呢？哎，我把这星星写到这里，然后是不是等于我在每一个前面就加了一个星星，哎，当然这个星星你肯定不能这么写，你这么写肯定加不上，哎应该怎么写呢？我这里应该写。

的是我们那个星星的一个编码，编码怎么写，诶密码怎么写，看这儿了，我们直接打开文档，它这是不是有一个F103呀，F177这玩意儿咱们找一个，比如说我这有一个这个小这什么爪子是不是熊爪子还是狼爪子是吧？后边是不是一个编号叫做F1B0啊，你只需要CTRLC把这个写到这儿就行了，但是你光写个它还不行，你还得前面加一个反斜盖，加一个反斜盖，注意反斜盖跟哪在删除键的下边就是一个反斜盖，直接写上就行了，那这个时候就表示我要把这个字体设置到我们这个笔before上就完事了啊注意通过这个表去查一下就OK了，查完了以后注意你看诶这显示是什么？显示是不是一个小方块啊，哎，显示是一个小方块，小方块证明什么什么不对，安装不对，乱码了，所以这个时候你光写它还不行，你还得写一下什么呢，你还得写一个这个放的family，也就是说你这。

你要设置一下这个字体格式，你得告诉他你这一块要用的字体是什么呢？是这里边一个字体，而不是随便一个字体，对吧？所以这里边你需要看一下它用的是什么字体，呃，我们这里面其实就是两个嘛，一个是FA，点一个FA，嗯，找这个方face。

放到face，你看我们FAB是不是用的是这个字体啊，所以你只需要把这个字体CTRLC干嘛呢，CTRLV给它粘过来就行。粘过来，然后现在来看，诶，你写完了以后，你会发现一个很神奇的现象，生没生效没生效，没生效那就证明它不是这个FAB民生效不是FAB，不是B，我们是不是还有一个FAFA呀，FA是不是用的是一个这个东西啊，哎，你把这个也占了。换一个，因为这两个你需要试一下啊把了注意一下，放family直接粘过来，这个就是一个FV，一个五的一个就设置完了，但是你光设置它还不行，因为下边是不是还有一个found white呀，Found外是啥，我们先不管，你直接给它加上就完事了啊，直接给它加上，那这个时候你看我这熊爪的是不是就生效了，哎，就生效了，那这里边你还可以给它设置颜色，比如说你设置一个color color来一个blue啊blue你还想给它设置一个距离，你可以设置一个marin，这个marin，这个right marin right来一个十像素啊，哎，这这这好像是。

这个爪子怎么像啊，跟百度那个差不多，这个爪子是吧，只是中间没有这个度啊，那这样我们是不是就设置完了，哎，所以我们用这个伪元素这个呃，伪元素设置的好处就是我设置一个就全都有了，你下边还有新的LY。是不是也可以跟着有了，哎，也可以跟着有了啊，那这里边我们简单总结一下啊，简单总结一下哎，通过我们这个伪元素哎来设置我们这个图标字体，哎图标字体，那这个步骤我们写一下第一个哎找到什么呢？找到要设置我们这个图标的这个元素啊图标元素诶通过什么呢？通过我们这个b four或什么呢？或after选中啊选中然后诶在我们这个什么呢？在我们这个content中，在content中来设置我们这个字体的一个编码，这个编码在哪？去文档里查一下，在最右侧这儿有一个编码啊，设置这个编码，查完了以后呢，第三一个来设置我们这个字体的一个样式，主要有两种啊，主要有两种，一个是我们就是这个fo family。

一个就是这个格式，还有一个呢，是我们的这个格式，你还需要多加一个放啊，总之你就这两种啊，如果是，呃，如果是FAB的，哎FAFAB的就是这个，这个是我们FAB的这个什么呢？这个是我们FA的啊，你根据你需要用那格式去选择就行了，所以比如说我们再找一个FA，刚才我们零的是FAFA0的零的零的，诶FAB的对吧，这个轮椅，我要想设置这个轮椅呢，诶不是复制它，复制这个编码368368，我这就得改成368了，368。

368设置完了以后，你看是不是又出现乱码了，哎，出现乱码怎么办？你需要把这两个住了，然后把上边再给它打开，是不是轮椅就出来了，哎，所以你根据你这个不同的这个格式去设置不同的字体就行了啊这两种情况，如果你这个字体是FA的，你就写它是fas，就写这个东西就可以了啊，这是一种方式啊，通过我们这个伪元素来设置，还有一种什么呢？在这儿我们来看一个啊，我写一个SPA，还有一种我们直接给它加一个class，比如说我这来一个as，加上class ass，那如果我们要设置的话，可能我们还需要加上一个FA，比如说BI，那这个时候这个零的是不是还可以出就可以出来了，或者你也可以写什么呢？你也可以用我们那个实体，实体还记得吗？哎，实体我们是叫做什么呀？哎，叫做and的符，开头分号，结尾，然后之间是不是实体的一个名字呀？哎实体一个名字，那我这可以写什么呢？一个井号，一个X金融。

号X后边你看我这个零的的编码是不是F0F3呀，哎，你可以在这直接写一个F0F3，是不是零铛也出来了，哎，也可以出来啊，所以你也可以通过这个实体的方式去使用，只是其实以前我是用类是吧，现在我把这个类改成实体，这两种方式啊都行啊都行，本质上是一样的啊，本质上是一样的，那注意这个格式啊，是怎么写的，是一个实体。

哎，通过我们这个实体，哎，来使用我们这个图标字体怎么用呢？是一个诶and符开头分号结尾，中间是一个井号X，后边跟的是什么呢？跟的是我们这个字体图标的一个，这个编码一写就行了，但是还是不要忘了这个类，不要忘了写，你不写不生效啊，不写不生效，好我们又补充了两种用法，那其实一共就这么三种啊，三种通过类，通过我们的实体，通过我们的伪元素啊这三种，那基本上所有的图标字体都是这三种用法，这三种用法你掌握了以后再换一个字体库也是一样的用啊，没有什么新鲜的啊，没有什么新鲜的，好，我们先说这么多，停一下。