uni静态资源引入及css图片图标引用规范
/* 引入uni-app内置的图标库 */
@import "uni.css";
/* 引入第三方图标库，例如Font Awesome */
@import "~@fortawesome/fontawesome-svg/styles.css";
/* 设置全局样式 */
body {
font-family: 'Open Sans', sans-serif;
}
/* 使用图标库中的图标类 */
.icon-example:before {
font-family: 'Font Awesome';
content: '\f007'; /* 这里的Unicode码应根据实际图标而定 */
}
/* 引用静态资源图片 */
.logo-image {
background-image: url('~@/static/logo.png'); /* 使用webpack的alias引用静态资源 */
background-size: cover;
width: 100px;
height: 100px;
}这个例子展示了如何在uni-app项目中引入静态资源和第三方图标库，并且如何在CSS中正确地引用这些资源。注意，使用~符号是为了引用@项目根目录的别名，这是webpack配置中的一个常见设置。
评论已关闭