如何通过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>
总结
到此这篇关于纯CSS实现取字符串的第一个字符实现文字图标功能的文章就介绍到这了,更多相关css实现文字图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
DevOps 代表开发和运营。 这是一种新的软件开发形式，彻底改变了软件产品的开发...
第一部分：基础知识 1.与:active 和 :hover这些伪类不一样，他们都是伪元素。 2....
解决方案 在父元素中加入position:relative; 子元素中加入position:absolute; ri...
作者：Matt Maribojoc 译者：前端小智 来源：stackabuse 有梦想，有干货，微信搜...
页面内容(HTML 代码)位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位...
在H5页面中嵌入视频的情况是比较多件的，有时候会碰到需要自动播放的情况，之前...
HTML5基于flash实现播放RTMP协议视频，具体代码如下所示： !doctype htmlhtmlhea...
工作中遇到如下需求，点击输入框弹出自定义弹窗，输入框是input标签： 但是在移...
filter和backdrop-filter具有一定区别： Filter不仅仅作用于当前元素，后代元素...
最近半个月为了期末考试，可要了学渣我半瓶血啊！今天本该好好复习的，可是状态...
