图标和文字边框

Question

我正在建立一个网站，除了一些文字外，我还希望有一些边框。在其上方，有一些图标。我想要的是边框仅占据LinkedIn文本的文本区域，而不是整个类。我已经尝试过position: absolute，但是一无所获。

.contactSocial {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.facebook:before {
  display: flex;
  justify-content: center;
  content: "\f39e";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;
}
 
.linkedIn {
  border-right: 2px solid green;
  border-left: 2px solid green;
}

.linkedIn:before {
 display: flex;
 justify-content: center;
 content: "\f0e1";
 font-family: "Font Awesome 5 Brands";
 font-weight: 900;
 color: blue;
}
 
.instagram:before {
  display: flex;
  justify-content: center;
  content: "\f16d";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;
}

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<div class="contactSocial">
  <div class="facebook">Facebook</div>
  <div class="linkedIn">LinkedIn</div>
  <div class="instagram">Instagram</div>
</div>

Answer 1

如果要更改标记，最简单的方法是将标签包装到import React, { Component } from 'react'; import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"; import PropTypes from 'prop-types'; const Map = withScriptjs(withGoogleMap((props) => { return( <GoogleMap defaultZoom={17} defaultCenter={{ lat: props.lat, lng: props.lng }} options={{streetViewControl: false}} > {props.isMarkerShown && <Marker position={{ lat: props.lat, lng: props.lng }} />} </GoogleMap> ) })) Map.propTypes = { lat: PropTypes.number.isRequired, lng: PropTypes.number.isRequired, isMarkerShown: PropTypes.bool.isRequired } export default Map;中并应用 border 这些span元素-请参见下面的演示

span

.contactSocial {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.facebook:before {
  display: flex;
  justify-content: center;
  content: "\f39e";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;
}
 
.linkedIn span { /* CHANGED */
  border-right: 2px solid green;
  border-left: 2px solid green;
}

.linkedIn:before {
 display: flex;
 justify-content: center;
 content: "\f0e1";
 font-family: "Font Awesome 5 Brands";
 font-weight: 900;
 color: blue;
}
 
.instagram:before {
  display: flex;
  justify-content: center;
  content: "\f16d";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;
}

Answer 2

图标和文字边框

将图标移到tekst元素之外。
然后在tekst元素上设置边框。

.contactSocial {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.iconFacebook:before {
  display: flex;
  justify-content: center;
  content: "\f39e";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;
}
.facebook {
  border: 5px solid cornflowerblue;
}

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<div class="contactSocial">
  <div>
    <div class="iconFacebook"></div>
    <div class="facebook">Facebook</div>
  </div>
  <div class="linkedIn">LinkedIn</div>
  <div class="instagram">Instagram</div>
</div>

Answer 3

我想你想要这个。如果不是，请告诉我。

.contactSocial {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.facebook:before {
  position: absolute;
  display: flex;
  justify-content: center;
  content: "\f39e";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;
}
 
.linkedIn {
  border-right: 2px solid green;
  border-left: 2px solid green;
  position: relative;
}

.linkedIn:before {
 display: flex;
 justify-content: center;
 content: "\f0e1";
 font-family: "Font Awesome 5 Brands";
 font-weight: 900;
 color: blue;
 position: absolute;
 width: 100%;
 bottom: 90%;
}
 
.instagram:before {
  display: flex;
  justify-content: center;
  content: "\f16d";
  font-family: "Font Awesome 5 Brands";
  font-weight: 900;
  color: blue;
}

<head><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<div class="contactSocial">
  <div class="facebook">Facebook</div>
  <div class="linkedIn">LinkedIn</div>
  <div class="instagram">Instagram</div>
</div>

边框仅占据元素而不是伪元素

3 个答案:

图标和文字边框