純CSS實(shí)現(xiàn)取字符串的第一個(gè)字符實(shí)現(xiàn)文字圖標(biāo)功能
發(fā)布時(shí)間：2020-05-11 15:13:58 作者：鄧孟鑫 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了純CSS實(shí)現(xiàn)取字符串的第一個(gè)字符實(shí)現(xiàn)文字圖標(biāo)功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
如何通過CSS實(shí)現(xiàn)文字圖標(biāo)
/*圖標(biāo)樣式*/
.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">技術(shù)是基礎(chǔ)</div> <div class="nav-icon-normal">能力是關(guān)鍵</div> <div class="nav-icon-normal">溝通最重要</div> <div class="nav-icon-normal">通用接口</div>
效果預(yù)覽
這樣基本效果實(shí)現(xiàn)出來，但是還是差一點(diǎn)。怎么通過實(shí)現(xiàn)圖標(biāo)背景色跟隨文字
可以看這篇Js 根據(jù)名字提取顏色值
如何實(shí)現(xiàn)看這里，下面代碼僅用于該文章的示例，真實(shí)使用需要根據(jù)實(shí)際情況做調(diào)整
var titles = ["技術(shù)是基礎(chǔ)", "能力是關(guān)鍵", "溝通最重要", "通用接口"];
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);
/**
* 根據(jù)名字提取顏色
* @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);
}
實(shí)現(xiàn)后的效果如下
最終附上案列代碼
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*圖標(biāo)樣式*/
.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 = ["技術(shù)是基礎(chǔ)", "能力是關(guān)鍵", "溝通最重要", "通用接口"];
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);
/**
* 根據(jù)名字提取顏色
* @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);
}
</script>
</body>
</html>
總結(jié)
到此這篇關(guān)于純CSS實(shí)現(xiàn)取字符串的第一個(gè)字符實(shí)現(xiàn)文字圖標(biāo)功能的文章就介紹到這了,更多相關(guān)css實(shí)現(xiàn)文字圖標(biāo)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css圖標(biāo)與文字對(duì)齊的兩種實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猚ss圖標(biāo)與文字對(duì)齊的兩種實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給的大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-12Html+css實(shí)現(xiàn)純文字和帶圖標(biāo)的按鈕
這篇文章主要介紹了Html+css實(shí)現(xiàn)純文字和帶圖標(biāo)按鈕的方法，按鈕有很多種外觀，本文介紹了純文字和帶圖標(biāo)兩種按鈕，感興趣的小伙伴們可以參考一下2016-02-24- 文字前的小圖標(biāo)在一些列表展示中特別的有用，本文會(huì)介紹一些實(shí)現(xiàn)的此效果的具體方法，感興趣的你可不要錯(cuò)過了哈，希望本教程對(duì)你有所幫助2013-03-20