精装 - 牛精九 online

this is may not a picture but a unicode ?

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.

:speaker: :sound: :loud_sound:

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.

e.g.

you’re right. it’s unicode not an image. the problem is, that i don’t know how to fix it. it seems not that easy.

1 Like

注意事项
1。 原css js逻辑盘根错节,特效交互很多,对我来说太高深,所以这个办法很粗暴,会有很多缺漏
2。 该代码主要通过文字的缩进,移除了动态生成的小喇叭 文字,然后在词典文件目录新建一个喇叭图标,通过背景图片引入到这里。

其他

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;
}

多谢多谢,太厉害了

请问解决了吗?如果解决了,能不能分享下您的css呢?

应该加上上面的css然后在目录下加上喜欢的喇叭的图片就行了吧。我还没来得及试呢。也不影响使用,只是效果的问题,不急