<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>web页面使用字体图标</title>
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div class="container" id="app">
<div class="control">
<div class="font-size">
<span class="label">字体大小</span>
<input type="range" v-model="fontSize" min="12" max="400">
</div>
<div class="font-color">
<span class="label">字体颜色</span>
<el-color-picker
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
</div>
</div>
<div class="png">
<img v-for="name in img" :key="name" :src="`./img/icon_png_64/${name}.png`" alt="" :style="`width: ${fontSize}px`">
</div>
<div class="icon" :style="`color: ${color}`">
<i v-for="name in img" :key="name" :class="`icon-${name}`" :style="`font-size: ${fontSize}px`"></i>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./js/main.js"></script>
</body>
</html>@img-and-icon/index.html
0