every implementation of the unicode: each of different “speaker”, is not same, may just search this unicode and check its relevant CSS code.
If the original design is the unicode instead within other process such like putting an alternative picture and both unicode in here, it may varies.
Also, I checked the previous snapshot of others’ uploading. It seems like the App:Dict change a browser engine? So that on different platform, there is a difference presentation.
Search the original CSS code, and change the content of above unicode emoji, they are characters, not a picture, change its address to a picture URI string.
1。 我没下载mdd
2。 我不知道这个词典的具体设置和用户想要的定制的交互特效的细节，所以可能有其它问题我们可以再讨论。
3。 关于隐藏除了display 微sibility 绝对布局left text ndent等好多个，用法不同可百度
4。 添加的图片是从longman american 下载的。喜欢不同风格或者点击变色等应该要改动js
5。 添加文字除了css的content或者js dom进行更改，目前没找到合适的方法，以我目前的水平。。。
6。 搜索css可以发现，单词的音标的喇叭可以直接替换为自己喜欢的反方向的喇叭或者英国美国的国旗，搜索一下Unicode 就有。
/* first copy image to dict root directory where .mdx exist
second rename the image to speaker.png
third add below code to .css file
you may wanna edit from these material
🇬🇧
🇺🇸
🕪
🕩
🕨 from these three unicode, we can add playing effect from zero sound to 1 sounds and then 3 sounds
*/
.OALECD_audio a.sound.pron-us {
text-indent: -9999px; /* move unicode out of screen */
background-image:url("speaker.png");
background-size: 1em;
background-repeat: no-repeat;
}
.OALECD_audio a.sound.pron-uk {
text-indent: -9999px;
background-image:url("speaker.png");
background-size: 1em;
background-repeat: no-repeat;
}
