将自定义图标添加到 HTML 页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38307278/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding Custom icon to HTML Page
提问by Ahmed Emad
I found this way to add default icons to any HTML page using i element : W3.CSS Icons
我发现这种使用 i 元素将默认图标添加到任何 HTML 页面的方法： W3.CSS Icons
Can I use the same way to have custom icon with the same way by adding my image?
我可以使用相同的方式通过添加我的图像以相同的方式使用自定义图标吗？
adding markup after changes :
更改后添加标记：
<li class="treeview">
<a href="#"><span class="icon"></span><span>Main Itmes</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li>
<a href="/Page1.aspx">Item1</a>
</li>
<li>
<a href="/Page2.aspx">Item2</a>
</li>
<li>
<a href="/Pagee3.aspx">Item3</a>
</li>
</ul>
</li>
CSS :
CSS :
<style>
.icon {
background: url("Images/logo.png");
height: 20px;
width: 20px;
display: block;
/* Other styles here */
}
</style>
回答by Rion Williams
Sure, although it depends on how you want to handle it.
当然，尽管这取决于您想如何处理它。
Regarding Icon Fonts
关于图标字体
Most of the images used in your examples are actually based on fonts that was create map each glyph to a specific Unicode value and then use CSS classes to set the contentproperty to that specific value, thus displaying the icon. It's unlikely that you would want to make a font to do just that, but there are quite a few out there that you might want to explore if you want to use a uniform set of icons for your site or application.
您的示例中使用的大多数图像实际上都是基于字体创建的，这些字体将每个字形映射到特定的 Unicode 值，然后使用 CSS 类将content属性设置为该特定值，从而显示图标。您不太可能想要制作一种字体来做到这一点，但是如果您想为您的网站或应用程序使用一组统一的图标，您可能想要探索很多字体。
Using CSS Classes
使用 CSS 类
A simpler approach would be to create a CSS class that points to your specific image as a background and sets the amount of space necessary to accommodate it :
一种更简单的方法是创建一个 CSS 类，将您的特定图像作为背景并设置容纳它所需的空间量：
.icon {
background: url('your-image-url.jpg');
height: 20px;
width: 20px;
display: block;
/* Other styles here */
}
You would then need to just create an element that has that CSS class to display your icon :
然后，您只需要创建一个具有该 CSS 类的元素来显示您的图标：
<span class='icon'></span>
Example
例子
.icon {
background: url('http://s.mobileread.com/i/icons/icon7.gif');
height: 16px;
width: 16px;
display: block;
/* Other styles here */
}<i class='icon'></i>回答by Ulvi Damirli
Yes, you can add the custom icon to span or i.
是的，您可以将自定义图标添加到 span 或 i。
- Give your span a class name.
- Set your icon as a background-image. Set background-size.
- If it doesn't work, add style to span and set width and height the same as you set to background-size.
- 给你的跨度一个类名。
- 将您的图标设置为背景图像。设置背景大小。
- 如果它不起作用，请将样式添加到跨度并将宽度和高度设置为与背景大小相同。
回答by Bilal aftab
.container{
width:700px;
height:700px;
margin-top:50px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
float:left;
}
.title {
color: grey;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
a {
text-decoration: none;
font-size: 22px;
color: black;
}
button:hover, a:hover {
opacity: 0.7;
}
.card1{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin-left:6px;
text-align: center;
float:left;
}<html>
<head>
<!-- Add icon library -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<img src="g.jpg" alt="John" style="width:50%">
<h1>Bilal</h1>
<p class="title">CEO & Founder, Example</p>
<p>Stacker </p>
<p>
<a href="#"><img title="facebook" alt="facebook" src="fb.png" width="30px"></a>
<a href="#"><img title="facebook" alt="facebook" src="t.png " width="30px></a>
<a href="#"><img title="facebook" alt="facebook" src="i.png " width="30px ></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</p>
<p><button>Contact</button></p>
</div>
<div class="card1">
<img src="g.jpg" alt="John" style="width:50%">
<h1>Bilal</h1>
<p class="title">CEO & Founder, Example</p>
<p>Stacker </p>
<p>
<a href="#"><img title="facebook" alt="facebook" src="fb.png" width="30px"></a>
<a href="#"><img title="facebook" alt="facebook" src="t.png " width="30px></a>
<a href="#"><img title="facebook" alt="facebook" src="i.png " width="30px ></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</p>
<p><button>Contact</button></p>
</div>
</div>
</body>