css第一个文字,纯CSS实现取字符串的第一个字符实现文字图标功能

如何通过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;

}

技术是基础

能力是关键

沟通最重要

通用接口

效果预览

这样基本效果实现出来，但是还是差一点。怎么通过实现图标背景色跟随文字

可以看这篇Js 根据名字提取颜色值

如何实现看这里，下面代码仅用于该文章的示例，真实使用需要根据实际情况做调整

var titles = ["技术是基础", "能力是关键", "沟通最重要", "通用接口"];

var html = "";

for (let i = 0; i < titles.length; i++) {

const title = titles[i];

const color = extractColorByName(title);

html += '

{1}

'.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);

}

实现后的效果如下

最终附上案列代码

/*图标样式*/

.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;

}

var titles = ["技术是基础", "能力是关键", "沟通最重要", "通用接口"];

var html = "";

for (let i = 0; i < titles.length; i++) {

const title = titles[i];

const color = extractColorByName(title);

html += '

{1}

'.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);

}

总结