网站常见引用
一、ico图标
ico图标,又名favicon,即Favorites Icon的缩写,是指显示在浏览器收藏夹、地址栏和标签标题前面的个性化图标。
上传一张图片,可以是ico格式。也可以是svg或png等格式。然后在页面引用这个图片
在<head>模块引用方法,通常位于<title>标签下方
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" >
如网站代码里面没有写这一行代码,有些浏览器默认会自动调用根目录的favicon.ico文件显示在对应位置。
二、font图标字体引用
包含了一系列矢量图标,可以轻松地通过 CSS 进行调用和使用,它可以被定制大小、颜色、阴影等。
在《阿里巴巴矢量图标库》的资源管理界面,选择《我的项目》,点击新建项目。
然后上传自己的设计的图标或者在《素材库》里添加图片。
然后我的项目,选择创建的项目,点击《fontclass》,然后点击《查看在线链接》。
在<head>模块引用方法,通常位于<title>标签下方
<link rel="stylesheet" href="你复制的链接">
在页面需要的位置,输入以下代码
<i class="iconfont icon-xxx"></i>
然后把《icon-xxx》替换成你项目对应图标下方的《复制代码》里的代码。
三、fonts字体引用
当默认主题无法满足你的需求,可以使用自定义字体嵌入到你的网页中。
本地版本
案例素材:
引用案例
// 在css文件里添加代码
@font-face {
font-family: HarmonyOS_Sans;
font-style: normal;
font-display: swap;
src: url(fonts/HarmonyOS_Sans.subset.woff2) format('woff2')
}然后在需要显示这个字体的css属性上,添加属性
font-family: HarmonyOS_Sans;
远程版本
为什么用远程字体?本地储存字体加载起来很慢,自己服务器慢的话那就可想而知了,所以我们可以利用其他网站储存的字体加速,如下面的链接,看链接就知道这是小米官网,放心使用~
<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans" />
添加调用字体到全局css
* {font-family: MiSans}文档如有描述不清楚、错误或者过时的地方,欢迎留言指出。
文档、教程内容会不定时更新,转载请标明原帖链接,以免让过时的教程流入网络。




