如何通過CSS實現文字圖標
/*圖標樣式*/
.nav-icon-normal {
width: 32px;
height: 32px;
line-height: 33px;
display: inline-block;
border-radius: 6px;
background-color: #b3b4c5;
vertical-align: middle;
overflow: hidden;
font-size: 16px;
text-indent: 8px;
text-align: center;
letter-spacing: 8px;
color: #fff;
word-break: break-all;
}
<div class="nav-icon-normal">技術是基礎</div>
<div class="nav-icon-normal">能力是關鍵</div>
<div class="nav-icon-normal">溝通最重要</div>
<div class="nav-icon-normal">通用接口</div>
效果預覽
這樣基本效果實現出來，但是還是差一點。怎麼通過實現圖標背景色跟隨文字
可以看這篇Js 根據名字提取顏色值
如何實現看這裏，下面代碼僅用於該文章的示例，真實使用需要根據實際情況做調整
var titles = ["技術是基礎", "能力是關鍵", "溝通最重要", "通用接口"];
var html = "";
for (let i = 0; i < titles.length; i++) {
const title = titles[i];
const color = extractColorByName(title);
html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title);
}
// 輸出
document.write(html);
/**
* 根據名字提取顏色
* @param name 名字
*/
function extractColorByName(name) {
var temp = [];
temp.push("#");
for (let index = 0; index < name.length; index++) {
temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
}
return temp.slice(0, 5).join('').slice(0, 4);
}
//————————————————
//版權聲明：本文爲CSDN博主「鄧孟鑫」的原創文章，遵循CC 4.0 BY - SA版權協議，轉載請附上原文出處鏈接及本聲明。
//原文鏈接：https://blog.csdn.net/dengmengxin/article/details/104052274
實現後的效果如下
最終附上案列代碼
一不要你錢，二不要你賞，可否給個贊！！！
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*圖標樣式*/
.nav-icon-normal {
width: 32px;
height: 32px;
line-height: 33px;
display: inline-block;
border-radius: 6px;
background-color: #b3b4c5;
vertical-align: middle;
overflow: hidden;
font-size: 16px;
text-indent: 8px;
text-align: center;
letter-spacing: 8px;
color: #fff;
word-break: break-all;
}
</style>
</head>
<body>
<script type="text/javascript">
var titles = ["技術是基礎", "能力是關鍵", "溝通最重要", "通用接口"];
var html = "";
for (let i = 0; i < titles.length; i++) {
const title = titles[i];
const color = extractColorByName(title);
html += '<div class="nav-icon-normal" style="background-color:{0}">{1}</div>'.replace('{0}', color).replace('{1}', title);
}
// 輸出測試HTML
document.write(html);
/**
* 根據名字提取顏色
* @param name 名字
*/
function extractColorByName(name) {
var temp = [];
temp.push("#");
for (let index = 0; index < name.length; index++) {
temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
}
return temp.slice(0, 5).join('').slice(0, 4);
}
//————————————————
//版權聲明：本文爲CSDN博主「鄧孟鑫」的原創文章，遵循CC 4.0 BY - SA版權協議，轉載請附上原文出處鏈接及本聲明。
//原文鏈接：https://blog.csdn.net/dengmengxin/article/details/104052274
</script>
</body>
</html>