前端基础快速学习-ICON插件

柔情只为你懂 2022-01-14 15:09 163阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

设计页面的时候很多时候需要用到各种小图标，如果都需要加载图片的话会比较累，一个常见的方法是加载特殊的字体。这些特殊的字体符号可以从网上下载插件，比如 [http://fontawesome.io/][http_fontawesome.io]

[![wKioL1h9ig-xEH-7AACG7ypL2lU438.jpg][]][wKioL1h9ig-xEH-7AACG7ypL2lU438.jpg]

下载解压之后就可以直接用了。

比如新创建一个目录，分门别类的创建好结构，在plugin里面放入下载的插件

[![wKiom1h9ihCQmaO0AABZNjU5AMw636.jpg][]][wKiom1h9ihCQmaO0AABZNjU5AMw636.jpg]

接下来就是编辑我们的html文件。

<body>里面就可以直接调用了

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 </td> 
 <td> <code>&lt;!DOCTYPE&nbsp;html&gt;</code> <code>&lt;</code><code>html</code>&nbsp;<code>lang</code><code>=</code><code>"en"</code><code>&gt;</code> <code>&lt;</code><code>head</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>meta</code>&nbsp;<code>charset</code><code>=</code><code>"UTF-8"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>link</code>&nbsp;<code>rel</code><code>=</code><code>"stylesheet"</code>&nbsp;<code>href</code><code>=</code><code>"plugins/font-awesome-4.6.3/css/font-awesome.css"</code>&nbsp;<code>/&gt;</code> <code>&lt;/</code><code>head</code><code>&gt;</code> <code>&lt;</code><code>body</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>i</code>&nbsp;<code>style</code><code>=</code><code>"color:&nbsp;red;"</code>&nbsp;<code>class</code><code>=</code><code>"fa&nbsp;fa-star"</code>&nbsp;<code>aria-hidden</code><code>=</code><code>"true"</code><code>&gt;&lt;/</code><code>i</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>i</code>&nbsp;<code>class</code><code>=</code><code>"fa&nbsp;fa-american-sign-language-interpreting"</code>&nbsp;<code>aria-hidden</code><code>=</code><code>"true"</code><code>&gt;&lt;/</code><code>i</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;</code><code>i</code>&nbsp;<code>class</code><code>=</code><code>"fa&nbsp;fa-university"</code>&nbsp;<code>aria-hidden</code><code>=</code><code>"true"</code><code>&gt;&lt;/</code><code>i</code><code>&gt;</code> <code>&lt;/</code><code>body</code><code>&gt;</code> <code>&lt;/</code><code>html</code><code>&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

具体调用的名字可以在网页上点开对应的图标找到

[![wKioL1h9ihDSkRPZAADDTkIhs\_A541.jpg][wKioL1h9ihDSkRPZAADDTkIhs_A541.jpg]][wKioL1h9ihDSkRPZAADDTkIhs_A541.jpg]

最后效果如下

[![wKiom1h9it-hVWGMAAAlE2IBsG4719.jpg][]][wKiom1h9it-hVWGMAAAlE2IBsG4719.jpg]

登录乐搏学院官网[http://www.learnbo.com/][http_www.learnbo.com]

或关注我们的官方微博[微信][Link 1]，还有更多惊喜哦~

![Center][]

转载于:https://my.oschina.net/learnbo/blog/869082

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/69d3abdebe594558b35ec7bfe7e11b2e.png
[http_fontawesome.io]: http://http//fontawesome.io/
[wKioL1h9ig-xEH-7AACG7ypL2lU438.jpg]: /images/20220114/ccb0dc7c8a7240d8a12b156998c27571.png
[wKiom1h9ihCQmaO0AABZNjU5AMw636.jpg]: /images/20220114/f3a1554a7df94dfa8cf4988ddfecfcfa.png
[wKioL1h9ihDSkRPZAADDTkIhs_A541.jpg]: /images/20220114/93a6450b1caa480db3640b3067f6ab6b.png
[wKiom1h9it-hVWGMAAAlE2IBsG4719.jpg]: /images/20220114/4037614a6a5f4a42af20722ae8d99924.png
[http_www.learnbo.com]: http://www.learnbo.com/
[Link 1]: http://lib.csdn.net/base/wechat
[Center]: /images/20220114/0a807a91039d473e8e6903d001473fc2.png