南强小屋 Design By 杰米
如何通过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); }
实现后的效果如下
最终附上案列代码
<!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); } </script> </body> </html>
总结
南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米
暂无纯CSS实现取字符串的第一个字符实现文字图标功能的评论...