纯CSS实现取字符串的第一个字符实现文字图标功能css图标与文字对齐的两种实现方法Html+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; }

技术是基础
能力是关键
沟通最重要
通用接口

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