javascript
拓展小知识（一）——使用 CSS 和 JS 加载阿里小图标
一、什么是阿里圖標？
這里可能會有人疑惑阿里圖標是什么、有什么用？別急看完下面描述你就懂了
上圖的是一個導航欄， 大家可以看到紅色方框里有許多圖標，這個要怎么弄？其實這并不難，如果要我們自己寫的話不僅要考慮布局、圖片導入等待，說到底還是挺麻煩。所以我們就可以用到阿里圖標庫，里面有各種各樣的圖標供我們使用，我們也可以減少代碼量，僅需幾行就搞定
二、阿里圖標庫使用步驟
① 直接百度 阿里圖標庫官網，進入的官網界面如下：
② 如果你沒有賬號的話就先注冊一個，這里我用查找“微博登錄”圖標為例。
首先在搜索框輸入”微博“
然后，我們就能獲得各種各樣的“微博登錄”的小圖標了
③選擇你喜歡的圖標，選擇“添加入庫”，并點擊右上角的購物車圖標，然后選擇“添加至項目”
最后，在你個人主頁就可以找到了
接下來就是導入到我們的代碼里了：這里我就介紹以下兩種方法
2.1、使用 CSS 加載
首先，點擊“Font code”，然后點擊更新代碼，然后會生成一個網址
打開這個網址
然后，我們將紅色方框里的加到標簽的類名中，并在 head 標簽里用導入外部 css 方式把該網址導入，示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>阿里圖標庫使用</title><!--記得導入網址--><link rel="stylesheet" href="https://at.alicdn.com/t/font_2587149_90l5olqw1mh.css"><style>div{width: 200px;height: 100px;background-color: black;color: white;font-size: 20px;}/*我們可以把網址里的這個類選擇器復制出來，這個可以修改圖標大小等一些操作*/.icon-weibo:before {font-size: 20px; /*把圖標大小變大*/}</style></head> <body><div><!--記得把 兩個類名加進來--><span class="iconfont icon-weibo"></span>阿里圖標庫使用</div> </body> </html>結果：
2.2、使用 JS 方式導入
這里有一點要注意的是用 CSS 方式導入是不能導入彩色圖標，使用 JS 方式是可以的。
還是用同樣的方式把圖標導入庫中，這里我用導入QQ、微博兩個彩色圖標為例：
首先，點擊“Symbol”，然后點擊更新代碼，然后會生成一個網址
復制該網址(生成的網址沒有http:記得加上)，用外部引入 js 的方式導入代碼中。
鼠標放圖標上，選擇“復制代碼”，粘貼到下面代碼的#后面，就能把圖標顯示出來
<svg class="icon"> <!--icon-QQ是你復制的代碼--><use xlink:href="#icon-QQ"></use> </svg>示例：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>阿里圖標庫使用</title><style>div{width: 400px;height: 200px;background-color: antiquewhite;color: black;font-size: 20px;}/*修改圖標大小*/.icon{width: 30px;height: 30px;}</style><!--導入生成的網址--><script src="https://at.alicdn.com/t/font_2587149_0o75kh2uglj.js"></script></head> <body><div><svg class="icon"><use xlink:href="#icon-QQ"></use></svg>這是QQ登錄的彩色圖標<br><svg class="icon"><use xlink:href="#icon-weibo1"></use></svg>這是微博登錄彩色圖標</div> </body> </html>結果：
總結
以上是生活随笔為你收集整理的拓展小知识（一）——使用 CSS 和 JS 加载阿里小图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学习笔记（九）——JSON 和 AJAX
- 下一篇： Windows 下安装 Redis