Question

我正在实现一个按钮来刷新我的HTML页面上的值，并在按钮内放置一个刷新图标。通过这样做，我看到我可以使用glyphicon：

.buttn{
background:transparent url(/reload.png) no-repeat left; }

或使用图片：

CSS：

<button id="button_reload" onclick=reload() class="buttn"></button>

HTML：

import boto3
client = boto3.client(
    'ec2',region_name='us-east-1',
    aws_access_key_id=ACCESS_KEY,
    aws_secret_access_key=SECRET_KEY,
)

prices=client.describe_spot_price_history(InstanceTypes=['m3.medium'],MaxResults=1,ProductDescriptions=['Linux/UNIX (Amazon VPC)'],AvailabilityZone='us-east-1')

print prices['SpotPriceHistory'][0]

两者之间有什么大不同，因为它们都有效？

Answer 1

在您的情况下，主要区别在于您将自定义图片设置为background的{{1}}。

如果是glyphicon，它不是button，而是background内的image。

以下两者将具有可应用于它们的不同属性集，并且将以不同的方式运行。 Glyphicon将表现为button，您的情况将表现为image。

例如，在您的情况下，您可以使用以下属性：background，background-repeat，background-size，您不能将其用于拼音，反之亦然。

Answer 2

Glyphicons是在 bootstrap 包内的字体系列（Glyphicons Halflings）中实现的一组字符。因此，它们不是图像，而是不支持background-repeat或background-size等背景属性。

如果您在项目中使用过bootstrap，则不再需要使用额外大小的图像图标。

这是glyphicons背后的CSS：

.glyphicon {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.glyphicon-refresh:before {
    content: "\e031";
}

HTML和CSS：glyphicon和image之间的区别

2 个答案: