Question

您好我有一些代码用于下面的图标栏：

<body onload=startTime()>
<div id=txt></div>
<meta content="width=device-width,initial-scale=1"name=viewport>
<link href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css rel=stylesheet>
<style>body{margin:0}.icon-bar{width:100%;background-color:#555;overflow:auto}.icon-bar a{float:left;width:20%;text-align:center;padding:12px 0;transition:all .3s ease;color:#fff;font-size:36px}.icon-bar a:hover{background-color:#000}.active{background-color:#4caf50!important}</style>
<body>
<div class=icon-bar>
<a href=Subpages/PC/pc.html><i class="fa fa-desktop"></i></a>
<a href=Subpages/Laptops/laptops.html><i class="fa fa-laptop"></i></a>
<a href=Subpages/Software/software.html><i class="fa fa-windows"></i></a>
<a href=Subpages/CoolStuff/coolstuff.html><i class="fa fa-smile-o"></i></a>
<a href=Subpages/About/About.html><i class="fa fa-question-circle-o"></i></a>
</div>

看起来像这样：

我想在图标下方显示一些文字，向访问者展示图标的含义。我尝试在fa fa - *****之后做一些文本，但它保留了一些文本。我去了w3schools，但他们没有任何文字例子。我不确定这是否可行，因为这是一个图标栏，而不是文本栏，但也许有办法。如果您知道某种方式，请回复。

谢谢！

Answer 1

试试这个：

<body onload="startTime()">
        <div id="txt"></div>
        <meta content="width=device-width,initial-scale=1" name="viewport" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
        <style>body{margin:0}.icon-bar{width:100%;background-color:#555;overflow:auto}.icon-bar a{float:left;width:20%;text-align:center;padding:12px 0;transition:all .3s ease;color:#fff;font-size:36px}.icon-bar a:hover{background-color:#000}.active{background-color:#4caf50!important}</style>
        <div class="icon-bar">
          <a href="Subpages/PC/pc.html">
            <i class="fa fa-desktop"><p style="font-size:20px;">text1</p></i>
          </a>
          <a href="Subpages/Laptops/laptops.html">
            <i class="fa fa-laptop"><p style="font-size:20px;">text2</p></i>
          </a>
          <a href="Subpages/Software/software.html">
            <i class="fa fa-windows"><p style="font-size:20px;">text3</p></i>
          </a>
          <a href="Subpages/CoolStuff/coolstuff.html">
            <i class="fa fa-smile-o"><p style="font-size:20px;">text4</p></i>
          </a>
          <a href="Subpages/About/About.html">
            <i class="fa fa-question-circle-o"><p style="font-size:20px;">text5</p></i>
          </a>
        </div>
      </body>

Answer 2

您可以使用. ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v1.5.10.RELEASE) 2018-04-25 11:37:33.615 INFO 11552 --- [ main] com.sample.SpringMain : Starting SpringMain on Computer with PID 11552 (D:\SpringExample\springBoot\target\classes started by User in D:\SpringExample\springBoot) 2018-04-25 11:37:33.617 INFO 11552 --- [ main] com.sample.SpringMain : No active profile set, falling back to default profiles: default 2018-04-25 11:37:33.655 INFO 11552 --- [ main] s.c.a.AnnotationConfigApplicationContext : Refreshing org.springframework.context.annotation.AnnotationConfigApplicationContext@2f490758: startup date [Wed Apr 25 11:37:33 IST 2018]; root of context hierarchy 2018-04-25 11:37:34.370 WARN 11552 --- [ main] o.h.v.m.ParameterMessageInterpolator : HV000184: ParameterMessageInterpolator has been chosen, EL interpolation will not be supported 2018-04-25 11:37:34.559 WARN 11552 --- [ main] s.c.a.AnnotationConfigApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'asynchronousService': Unsatisfied dependency expressed through field 'taskExecutor'; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type 'org.springframework.core.task.TaskExecutor' available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)} 2018-04-25 11:37:34.564 INFO 11552 --- [ main] utoConfigurationReportLoggingInitializer : Error starting ApplicationContext. To display the auto-configuration report re-run your application with 'debug' enabled. 2018-04-25 11:37:34.626 ERROR 11552 --- [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPLICATION FAILED TO START *************************** Description: Field taskExecutor in com.sample.dao.AsynchronousService required a bean of type 'org.springframework.core.task.TaskExecutor' that could not be found. Action: Consider defining a bean of type 'org.springframework.core.task.TaskExecutor' in your configuration.标记添加文字

＆＃13;

span

＆＃13;

body{margin:0}.icon-bar{width:100%;background-color:#555;overflow:auto}.icon-bar a{float:left;width:20%;text-align:center;padding:12px 0;transition:all .3s ease;color:#fff;font-size:36px; text-decoration: none; font-size: 16px;}.icon-bar a:hover{background-color:#000}.active{background-color:#4caf50!important}
.icon-bar a span {
  display: block;
  margin-top: 5px;
}

＆＃13;

工作小提琴here

在我的图标栏（HTML）中为我的图标添加文字

2 个答案: