纯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);

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

 

    

 

总结

到此这篇关于纯CSS实现取字符串的第一个字符实现文字图标功能的文章就介绍到这了,更多相关css实现文字图标内容请搜索考高分网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持考高分网！