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

&nbs p; 如何通过CSS实现文字图标

/*图标样式*/
.nav -i con-normal {
    width: 32px;
    h ei ght: 32px;
    line-height: 33px;
    dis play : inline-block;
    border-radius: 6px;
    background-color:  # b3b4c5;
    vert ical -align: middle;
    overflow: hidden;
    font- Size:  16px;
    text-indent: 8px;
    text-align:  center ;
    letter -s pacing: 8px;
    color: #fff;
    word- br eak: 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  t IT les = ["技术是基础", "能力是关键", "沟通最重要", "通用接口"];
var ht ML  = "";
for (let i = 0; i < titles.length;  i++ ) {
    const title = titles[i];
    const color = extractColorByN am e(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);
}

实现后的效果如下

最终附上案列代码

<!DOCTY PE  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>

总结

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

总结

以上是为你收集整理的纯CSS实现取字符串的第一个字符实现文字图标功能全部内容，希望文章能够帮你解决纯CSS实现取字符串的第一个字符实现文字图标功能所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于纯CSS实现取字符串的第一个字符实现文字图标功能的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201150

更新时间：2023-04-27 阅读：24次