Question

我正在建立一个篮球网站，我需要制作一些自定义图标/按钮，用于指向不同页面的链接。我想创建一个自定义按钮，其中包含一张带有下图的圆形图片。在它下面，我需要文字。

我不知道如何将文字和图片放在同一个图标中。

感谢。这是我想要的一个例子。 https://i.stack.imgur.com/5xgEo.png

Answer 1

您可以使用HTML和CSS

来完成此操作

<div class="container">
<img src="example.jpg" alt="img miss">
<div class="centered">Centered</div>
</div>

<style>
.container {
position: relative;
text-align: center;
color: white;
}

.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Answer 2

使用锚标记。使图像和文本成为链接

<a href ="link" >
   <div class="class_name" >
      <img src ="image_path" >
      <p> text </p>
   </div>
</a>

将文字作为链接

<a href ="link" > text </a>

当使用锚标记<a>时，像<a>＆amp; </a>将成为链接，点击该链接指示我们在href

中链接提及

Answer 3

您可以使用图片，或创建链接.. 看一个例子：

import re, csv

with open (r'c:\temp\noregcompanies.csv', 'rb') as q:
    readerM=csv.reader(q)
    for row in readerM:
        companySourcename = row[0]+"".join(r'.*(?!Ltd|Limited|LTD|LIMITED).*')   
        IBcompanies = re.compile(companySourcename)
        IBcompaniesString = str(companySourcename)

    with open (r'c:\temp\chdata.csv', 'rb') as f:
        readerS = csv.reader(f)
        for row in readerS:
            companyCHname = row[0]+"".join(r'.*(?!Ltd|Limited|LTD|LIMITED)*')
            CHcompanies = re.compile(companyCHname)
            if CHcompanies.match(IBcompaniesString):
                print ('Match is: ',row [0], row[1])
                with open (r'c:\temp\outputfile.csv', 'ab') as o:
                    writer = csv.writer(o, delimiter=',')
                    writer.writerow(row) t

Answer 4

你也可以尝试这样：

＆＃13;

* {
  boz-sizing: border-box;
}

body {
  font-family: sans-serif;
  background: #333;
  padding: 20px;
}

.button {
  background: #fff;
  border-radius: 6px;
  display: inline-block;
  padding: 10px;
  text-align: center;
  max-width: 150px;
  text-decoration: none;
}

.button figure {
  margin: 0 0 15px;
}

.button figure img {
  border-radius: 100%;
}

.button .text {
  font-weight: bold;
  text-transform: uppercase;
  color: #1d368a;
  margin: 0 0 15px;
  font-size: 16px;
}

＆＃13;

<a href="#" class="button">
  <figure><img src="http://via.placeholder.com/100x100"></figure>
  <div class="text">
    Start Playing Basketball
  </div>
</a>

＆＃13;

Answer 5

对于有效的HTML ，您必须注意您使用的元素。如果使用锚标记，则只能在其中使用内联元素。但是使用CSS，你可以改写一切。

<强> HTML：

<a class="btn">
    <span class="btn-img"></span>
    <span class="btn-text">Start playing basketball</span>
</a>

<强> CSS：

.btn {  
    display:block;
    padding:10px;
    background-color:white;
    border-radius:5px;
    position:relative;
    width:200px;
    text-align:center;
}
.btn-img {
    position:relative;
    width:175px;
    height:175px;
    border-radius:50%;
    display:block;
    margin:0 auto;
    background-color:red;
    background-image:url(YOUR IMAGE);
 }
 .btn-text {
   text-transform:uppercase;
   font-size:12px;
 }

Answer 6

请检查链接

https://jsfiddle.net/9wjcya06/

<a href ="#" class="btn-link" >
   <div class="button" >
      <img src ="https://i.pinimg.com/originals/40/97/c4/4097c40d4f2e1bbcc9044be03b5f730e.jpg" alt="img" >
      <span> START PLAYING BASKET BALL </span>
   </div>
</a>

Answer 7

见下面的代码：

.img{
    border-radius: 50%;
    height: 120px;
    width: 120px;
    padding: 11px;
    padding-bottom:0px;
}
.txt{
   font-family: Georgia, serif;
    text-align: center;
    width: 85px;
    color: blue;
    padding-left: 34px;
    font-size: 14px;
}
.btn{
    background-color: white;
    
}

<button class="btn">
<img class="img" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
<p class="txt">strat playing basketball</p>
</button>

Answer 8

步骤1.添加图标库，例如字体真棒。

步骤2.将图标添加到HTML按钮

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font- 
awesome/4.7.0/css/font-awesome.min.css">
<style>
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}

/* Darker background on mouse-over */
.btn:hover {
background-color: RoyalBlue;
}
</style>
</head>
<body>
<p>Icon buttons with text:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

</body>         
</html>

如何创建带图像和文本的按钮

8 个答案: