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