如何从网页复制CSS内容？

Question

我被要求老板在我们的网页上创建此按钮

我可以创建按钮以为其添加颜色和文本，但是我不能在按钮中包含该图标。我与老板分享了问题，然后他给了我这个链接https://gourmet.epark.jp/detail/EG00541264，并告诉我查看其中的按钮并以相同的方式进行操作。

我尝试检查元素和其他方式，但仍然无法做到这一点。 我没有太多使用CSS的经验，因此需要帮助。

谢谢。

编辑-我尝试过此操作，但是无法在按钮文本前添加该小图标

Duplicate Java type found! Mappings between managed types and Java types must be unique. First Type: 'Com.Theartofdev.Edmodo.Cropper.CropImageView+IOnSetImageUriCompleteListenerImplementor, Binding_AndroidImageCropper, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null'; Second Type: 'Xamarin.Android.ImageCropper.CropImageView+IOnSetImageUriCompleteListenerImplementor, Xamarin.Android.ImageCropper, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null' ParTimers.Android

Answer 1

因此，基本上，您需要执行以下操作（从给定的链接复制）：

.shop-navi-app {
    font-size: 14px;
    font-weight: 700;
    width: 200px;
    text-align: center;
}

.btn {
  background-color: #e24f01;
  color: #fff;
  border-radius: 2px;
  line-height: 30px;
}

.shop-navi-app>a {
    padding: 0;
    line-height: 35px;
}

.btn>a, .main-search-area-body .search-box .btn-search>a {
    color: #fff;
    display: block;
    line-height: 1;
    padding: .3em .8em;
}

a {
    color: #2f0a0a;
    text-decoration: none;
}

.shop-navi-app .icon {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    margin: -1px 10px 0 0;
}

.icon {
    font-family: epg-pc!important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.shop-navi-app .icon-caption {
    display: inline-block;
    vertical-align: middle;
}

.icon-reserve2::after {
    content: url(https://image.ibb.co/esaspT/if_Leaf.png);
}

<div class="shop-navi-app btn">
  <a href="/reserve/EG00541264">
    <i class="icon icon-reserve2"></i>
    <span class="icon-caption">WEB予約</span>
  </a>
</div>

说明：

<div class="shop-navi-app btn">//for button class
  <a href="/reserve/EG00541264">//for link to other page
    <i class="icon icon-reserve2"></i>// for icon
    <span class="icon-caption">WEB予約</span>// for text
  </a>
</div>

在代码中，整个按钮为div。然后，您在a中有div标记，其中包含单击按钮时重定向的链接。 a标签在i标签和span标签中包含用于文字的图标。