Question

您好我正在尝试在元素之前和之后添加字体真棒图标。但我不知道如何编写其CSS以及如何获取字体真棒图标链接以将它放在css之后。

我创建了这样的结构。

 <html>
	<head>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
	</head>
	<style>
		.thish{position:relative; height:150px; width:150px ; background:red;  }
		.thish::before{position:absolute; content:'tyjthsrgd';right:40%; color:#000; bottom:0; height:30px; width:60px; background:green; z-index:1; }
	</style>
	
	<body>
		<div class="thish"> 
		</div>
	</body>
 </html>

Answer 1

添加到您的public void detectBitmapFromVideo(int secondcount, int framecount, String videoPath) { //int fps = 800000 / framecount; int delta_time = secondcount * 1000000; //in microsecs //FFmpegMediaMetadataRetriever mmr = new FFmpegMediaMetadataRetriever(); //mmr.setDataSource(videoPath); //String s_duration = mmr.extractMetadata(FFmpegMediaMetadataRetriever.METADATA_KEY_DURATION); MediaMetadataRetriever mediaMetadataRetriever = new MediaMetadataRetriever(); mediaMetadataRetriever.setDataSource(videoPath); int duration = getVideoDuration(mediaMetadataRetriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_DURATION)); //int duration = getVideoDuration(s_duration); ArrayList<Frame> frames = new ArrayList<Frame>(); //Log.e("Duration ", "Duration = " + duration + " Delta time = " + delta_time); for (int i = 0; i <= duration; i += delta_time) { Bitmap bmFrame = mediaMetadataRetriever.getFrameAtTime(i); //unit in microsecond if (bmFrame == null) { //Log.e(TAG, "frame image " + bmFrame.toString()); continue; } //saveBitmapImage(bmFrame,i+""); frames.add(new Frame.Builder().setBitmap(bmFrame).build()); /*Bitmap frame_orig = mmr.getFrameAtTime(i, FFmpegMediaMetadataRetriever.OPTION_CLOSEST); if (frame_orig == null) { continue; } frames.add(new Frame.Builder().setBitmap(rotateBitmap(frame_orig, 90f)).build()); //Log.e("Faces Detected", "Face detection on going duration = " + duration + " Deleta time = " + i); } } 伪选择器

before

要获取content: "\f2ba"; font: normal normal normal 14px/1 FontAwesome;的值，请转到website，

右键单击 - ＆gt;检查任何图标（content标记），然后检查<i> ::before </i> 伪选择器中内容的值。

别忘了输入font

的值

before

这非常重要。

normal normal normal 14px/1 FontAwesome;

Answer 2

对于Fontawesome 4

您只需将以下CSS添加到after或before元素：

font: normal normal normal 14px/1 FontAwesome;
content: '\f042';

此处content是您要添加的图标。只需从FA网站复制图标的Unicode，然后将其粘贴到带有\前缀的内容中。

＆＃13;

.thish {
  position: relative;
  height: 150px;
  width: 150px;
  background: red;
}

.thish::before {
  position: absolute;
  font:normal normal normal 14px/1 FontAwesome;
  content: '\f042';
  right: 40%;
  color: #000;
  bottom: 0;
  height: 30px;
  width: 60px;
  background: green;
  z-index: 1;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<div class="thish">
</div>

＆＃13;

如何在元素之前添加字体真棒图标

2 个答案: