网站的icon图标与阿里云图标库的使用
文章目錄
- 一、網站icon圖標
- 1.使用icon圖標
- 2.制作icon圖標
- 3.注意
- 二、圖標庫的引入
- 1.進入阿里云圖標庫主頁
- 2.選擇一種登錄方式并登錄
- 2.搜索圖標并加入購物車
- 添加至項目
- 下載素材
- 三、壓縮圖片
提示：以下是本篇文章正文內容，下面案例可供參考
一、網站icon圖標
1.使用icon圖標
例：
-
首先把favicon.ico （需要設置的圖標）放到根目錄下。
-
在html里面， head 之間 引入。代碼：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
2.制作icon圖標
我們可以將自己做的圖片，轉換為 ico圖標，以便放到我們站點里面。
方法：
- 首先把我們想要的圖標切成圖片。
- 要把圖片轉換為 ico 圖標，可以借助于第三方轉換網站 比特蟲： http://www.bitbug.net/。 如下：
3.注意
1.它是顯示在瀏覽器中的網頁圖標。
2. 它是圖標形式，不是一個圖片。
3. 位置是放到 head 標簽中間。
4. 后面的type=“image/x-icon” 屬性可以省略。
5. 為了兼容性，應將favicon.ico 這個圖標放到根目錄下。
二、圖標庫的引入
1.進入阿里云圖標庫主頁
網址：https://www.iconfont.cn/
2.選擇一種登錄方式并登錄
2.搜索圖標并加入購物車
結果如下：
可以選擇多個圖標加入購物車，點擊右上角的購物車圖標，可以看到已選的圖標：
主要介紹兩種方式，（1）添加至項目（2）下載素材
添加至項目
（1）首先創建或選擇一個項目：
（2）點擊確定，跳到資源管理界面：
（3）點擊生成代碼，并復制代碼：
（4）將代碼粘貼在頁面head區域的style標簽中或寫在外部css中，在head中通過link標簽引入，例：
（5）在項目中使用：
點擊圖標上的復制代碼
在項目中直接使用：
此時的圖標更像文字，可以設置顏色、大小及是否加粗，注意要給使用icon的標簽設置一個屬性：font-family: ‘iconfont’，否則圖標會不顯示。例：
結果：
下載素材
選擇需要的顏色和格式，會生成一個圖片icon，在項目中直接當做一個小icon圖片使用。
例：
三、壓縮圖片
圖片線上壓縮工具 https://tinypng.com/
總結
以上是生活随笔為你收集整理的网站的icon图标与阿里云图标库的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 科维PLC运行时系统ProConOS e
- 下一篇： G代码 机器人的CNC实现